Javascript vue cli中的反应属性错误 你好

我对vue cli有一些问题。 我尝试显示（在主组件中）输入的文本（在子组件中）。这是工作（很奇怪），但有一条错误消息：

vue.esm.js?efeb:578 [Vue warn]: Property or method "test" is not 
defined on the instance but referenced during render. Make sure that 
this property is reactive, either in the data option, or for class-
based components, by initializing the property. See: 
https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-
Properties.

found in

---> <Signup> at src/components/auth/Signup.vue
       <App> at src/App.vue
         <Root>

vue.esm.js？efeb:578[vue warn]：属性或方法“test”不可用
在实例上定义，但在渲染期间引用。确保
此属性在数据选项或类中是被动的-
基于组件，通过初始化属性。见：
https://vuejs.org/v2/guide/reactivity.html#Declaring-反应性-
财产。
发现于
--->在src/components/auth/Signup.vue
在src/App.vue

我在internet上搜索，有很多示例可以解决此错误，但没有使用体系结构vue cli。我不明白

一步一步地： 我编写了一个组件：

<template>
   <div class="container">
     <p>{{ data.test }}</p>
     <form @submit.prevent="signup">
      <v-customInput v-model="test" @onChangeValue="onChange"></v-customInput>
     </form>
   </div>
</template>

<script>
  import CustomInput from '../shared/CustomInput'

 export default {
   name: 'HelloWorld',
   components: {
    'v-customInput': CustomInput,
   },
   data() {
     return {
       data: {
         test: '',
         first_name: '',
         last_name: '',
         email: '',
         password: '',
         vat: 0,
         creation_company_date: new Date(),
         phone: '',
       },
       error: false,
     };
    },
    methods: {
     onChange(variable) {
       const data = this.data;
        for (let value in data) {
         if (value === 'test') {
           data[value] = variable;
         }
        }
     }
   },
 };
</script>

{{data.test}

从“../shared/CustomInput”导入CustomInput
导出默认值{
名称：“HelloWorld”，
组成部分：{
“v-customInput”：customInput，
},
数据（）{
返回{
数据：{
测试：“”，
名字：''，
姓氏：“”，
电子邮件：“”，
密码：“”，
增值税：0，
创建公司日期：新日期（），
电话：''，
},
错误：false，
};
},
方法：{
onChange（变量）{
const data=this.data；
for（数据中的let值）{
如果（值=='test'）{
数据[值]=变量；
}
}
}
},
};

和子组件：

<template>
  <div class="customInput">
    <input v-model="value" type="text">
    <label>First Name</label>

<script>
 export default {
  name: 'CustomInput',
  data() {
    return {
      value: '',
    };
  },
  watch: {
    value: function(val, oldVal) {
      this.$emit('onChangeValue', this.value);
    }
  },
 };
</script>

名字
导出默认值{
名称：“CustomInput”，
数据（）{
返回{
值：“”，
};
},
观察：{
值：函数（val，oldVal）{
此.emit（'onChangeValue'，this.value）；
}
},
};

在vue-2.x中，如果使用v-model绑定属性，但该属性不存在（

在本例中测试），则会出现错误

尝试以下操作：添加
test
属性

<template>
   <div class="container">
     <p>{{ data.test }}</p>
     <form @submit.prevent="signup">
      <v-customInput v-model="test" @onChangeValue="onChange"></v-customInput>
     </form>
   </div>
</template>

<script>
  import CustomInput from '../shared/CustomInput'

 export default {
   name: 'HelloWorld',
   components: {
    'v-customInput': CustomInput,
   },
   data() {
     return {
       test: '', // <===== initialize test with a default value
       data: {
         test: '',
         first_name: '',
         last_name: '',
         email: '',
         password: '',
         vat: 0,
         creation_company_date: new Date(),
         phone: '',
       },
       error: false,
     };
    },
    methods: {
     onChange(variable) {
       const data = this.data;
        for (let value in data) {
         if (value === 'test') {
           data[value] = variable;
         }
        }
     }
   },
 };
</script>


{{data.test}

从“../shared/CustomInput”导入CustomInput
导出默认值{
名称：“HelloWorld”，
组成部分：{
“v-customInput”：customInput，
},
数据（）{
返回{
测试：“”，//我可以看到组件
注册吗？
？谢谢你，我的坏朋友，我忘记了
数据。
在v-model=“test”：）重新表述OP时，解决方案是将其更改为
v-model=“data.test”