vue-cli 中的反应性属性错误

Posted

技术标签:

【中文标题】vue-cli 中的反应性属性错误【英文标题】:Reactive properties error in vue-cli 【发布时间】:2018-06-09 21:56:11 【问题描述】:

你好,

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-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>

和一个子组件:

<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>

【问题讨论】:

我可以看到组件Signup 吗? 【参考方案1】:

在 vue-2.x 中,如果您使用 v-model 绑定一个属性并且该属性不存在(在这种情况下为test),那么您将收到错误。

试试这个:添加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>

【讨论】:

谢谢你,我的错,我在 v-model="test" 中忘记了data. :) 改写 OP,解决方案是将其更改为 v-model="data.test"

以上是关于vue-cli 中的反应性属性错误的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli中的main.js中 new Vue 中的template属性啥意思

vue-cli在打包后js获取的图片路径错误问题时候

vue-cli配置跨域代理

vue-cli项目打包出现空白页和路径错误问题

vue-cli用本地代理请求数据可以,但是打包之后的dist中的htmlproxy没有起作用,打包没有错误这情况怎么办

使用 vue-cli 遇到“无法推断解析器”错误