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属性啥意思