属性或方法“firstName”未在实例上定义，但在渲染期间被引用答案

【问题标题】：Property or method "firstName" is not defined on the instance but referenced during render属性或方法“firstName”未在实例上定义，但在渲染期间被引用
【发布时间】：2021-07-07 19:27:45
【问题描述】：

我在Signup.vue 页面上的输入不断收到此警告。我的代码中的所有四个输入都有警告：

firstName
lastName
email
password

我不断收到每个实例的此警告。

[Vue 警告]：属性或方法“firstName”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：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>

【问题讨论】：

请向我们展示组件。如果您在模板中使用变量，但在脚本部分中没有引用，这通常会发生。
你使用v-model="firstName"，但在你的data()中你有return {form: {firstName, ...etc...}}。所以试试v-model="form.firstName"。我还注意到你有一个@v-model="lastName"，我认为它的语法不正确。

标签： vue.js vue-component vue-router

【解决方案1】：

在渲染视图时，Vue 无法找到每个输入 v-models 的属性，因为字段位于表单对象中。您可以将它们称为form.firstName、form.lastName 等，也可以将它们移出data() 部分中的对象。

【讨论】：