Question

你好，

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

for(i in 1:length(list)){
  print(list[[1]]) # access dataframe
  DF <- list[[i]]
 sql[[i]]<- sqldf("select name,gender,count(name) from DF group by gender ")
}
print(sql)
# [[1]]
#   name gender count(name)
# 1    a      m           1
# 
# [[2]]
#   name gender count(name)
# 1    b      m           1
# 
# [[3]]
#   name gender count(name)
# 1    b      f           1

我在互联网上搜索，有很多例子来解决这个错误，但没有使用架构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>

和一个孩子组件：

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

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

vue-cli中的反应属性错误

你好，

一步一步：

1 个答案: