Vue.js 不呈现表单元素

Question

我是 Vue.js 的新手。我想创建一个多步骤注册组件。 这将是 2 个带有“下一个”和“上一个”按钮的表单。

我创建了一个模板。不幸的是，Vue.js 没有呈现我的表单（输入和按钮）。它显示了唯一具有背景和文本“调试”的 div 我的其他组件可以工作，但是这个有问题。

<template>
  <div class="l-signup-container">
    <div class="l-signup">
      <v-form v-model="validSignUp">
        <div v-if="step === 1">
          <h1>1 шаг</h1>
          <v-text-field label="Полное Имя"
                        v-model="newUser.name"
                        :rules="rules"
                        required
                        color="light-blue lighten-1">
          </v-text-field>

          <v-text-field label="Название Организации"
                        v-model="newUser.company"
                        :rules="rules"
                        required
                        color="light-blue lighten-1">
          </v-text-field>

          <v-text-field label="Адрес электронной почты"
                        v-model="newUser.email"
                        :rules="rules"
                        required
                        color="light-blue lighten-1">
          </v-text-field>

          <v-text-field label="Пароль"
                        v-model="newUser.password"
                        prepend-icon="lock"
                        :rules="rules"
                        :append-icon="signUpPasswordVisible ? 'visibility' : 'visibility_off'"
                        :append-icon-cb="() => (signUpPasswordVisible = !signUpPasswordVisible)"
                        :type="signUpPasswordVisible ? 'text' : 'password'"
                        color="light-blue lighten-1"
                        required>
          </v-text-field>
          <v-btn block color="light-blue lighten-1" @click.prevent="next()">Дальше</v-btn>
        </div>

        <div v-if="step === 2">
          <h1>Пригласить сотрудников</h1>
          <v-text-field label="Адрес электронной почты"
                        v-model="newUser.email"
                        :rules="rules"
                        required
                        color="light-blue lighten-1">
          </v-text-field>
          <v-text-field label="Адрес электронной почты"
                        v-model="newUser.email"
                        :rules="rules"
                        required
                        color="light-blue lighten-1">
          </v-text-field>
          <v-text-field label="Адрес электронной почты"
                        v-model="newUser.email"
                        :rules="rules"
                        required
                        color="light-blue lighten-1">
          </v-text-field>

          <v-btn block color="light-blue lighten-1" @click.prevent="prev()">Назад</v-btn>
          <v-btn block color="light-blue lighten-1" @click.native="submitSignUp()">Начать работу</v-btn>

        </div>

      </v-form>
    </div>
    <br/><br/>Debug: {{registration}}
  </div>

</template>

<script>
import TestReg from '@/components/pages/TestReg'
export default {
  data () {
    return {
      validSignUp: false,
      signUpPasswordVisible: false,
      rules: [ (value) => !!value || 'This field is required' ],
      newUser: {
        name: '',
        email: '',
        company: '',
        password: ''
      },
      message: ''
    }
  },
  methods: {
    prev () {
      this.step--
    },
    next () {
      this.step++
    },
    submitSignUp () {
      TestReg.signup(this, this.newUser, '/')
    }
  }
}
</script>

<style lang="scss">
  @import "./../../../assets/styles";
  .l-signup {
    background-color: $background-color;
    padding: 15px;
    margin: 45px auto;
    min-width: 272px;
    max-width: 320px;
    animation: slideInFromLeft 1s forwards ease;
  }
</style>

Answer 1

我试图重现您的组件。我猜你必须在data 属性中定义一些变量：

data () {
    return {
      validSignUp: false,
      signUpPasswordVisible: false,
      rules: [ (value) => !!value || 'This field is required' ],
      step: 1,
      registration: '',
      //...
    }
}