Блог

Я продолжаю получать это предупреждение за свои материалы на своей Signup.vue странице. У меня есть предупреждение для всех четырех входов в моем коде:

• firstName
• lastName
• email
• password

Я продолжаю получать это предупреждение для каждого экземпляра соответственно.

[Предупреждение Vue]: Свойство или метод «Имя» не определено в экземпляре, но на него ссылаются во время визуализации. Убедитесь, что это свойство является реактивным, либо в параметре данные, либо для компонентов на основе классов, инициализировав свойство. См.: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

 ---> found in
    ---> <Register> at src/components/Register.vue
           <App> at src/App.vue
             <Root>
 

Это мой Signup компонент

 <template>
    <div id="register">
        <form>
            <label for="firstName">First Name</label>
            <input type="text" id="firstName" v-model="firstName"/>

            <label for="lastName">Last Name</label>
            <input type="text" id="lastName" @v-model="lastName"/>

            <label for="email">Email</label>
            <input type="text" id="email" v-model="email"/>

            <label for="password">Password</label>
            <input type="text" id="password" v-model="password"/>

            <button type="submit">Register!</button>
        </form>
    </div>
</template>

<script>
export default {
    data(){
        return {
            form: {
                firstName: '',
                lastName: '',
                email: '',
                password: ''
            }
        }
    },
    methods: {
        //methid take two parameters input or local parameter and the value of it 'firstname'-john
        updateForm (input, value){
            this.form[input] = value

            let storedForm = this.openStorage() //extract openstorage and place in storedform
                if(!storedForm) storedForm = {} //if no data, then make empty object

            storedForm[input] = value //store new value
                this.saveStorage(storedForm) //save changes in saveStorage function which is connected to local storage
        },
        mounted() {
            if (localStorage.name){
                this.name = localStorage.name;
            }
        },
        //opening local storage form
        openStorage(){
            return JSON.pasrse(localStorage.getItem('form'))
        },
        //saving local storage data
        saveStorage(){
            localStorage.setItem('form', JSON.stringify(form))
        }
        
    },
    watch: {
        name(newName){
            localStorage.name = newName;
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
 

При отображении представления Vue не может найти свойства для каждого из ваших входных v-model данных, так как поля находятся в объекте формы. Вы можете либо ссылаться на них как form.firstName на и т. form.lastName Д. , Либо перемещать их из объекта в data() разделе.