#vue.js #vue-component #vue-router
Вопрос:
Я продолжаю получать это предупреждение за свои материалы на своей 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>
Комментарии:
1. пожалуйста, покажите нам компонент. в основном это происходит, если вы используете переменную внутри своего шаблона, но у вас нет ссылки в части сценария.
2. вы используете
v-model="firstName"
, но в вашемdata()
у вас естьreturn {form: {firstName, ...etc...}}
. так что попробуйv-model="form.firstName"
. Я также отметил , что у вас есть@v-model="lastName"
, я не думаю, что это правильный синтаксис.
Ответ №1:
При отображении представления Vue не может найти свойства для каждого из ваших входных v-model
данных, так как поля находятся в объекте формы. Вы можете либо ссылаться на них как form.firstName
на и т. form.lastName
Д. , Либо перемещать их из объекта в data()
разделе.