2

hello,

I have a few problem with vue-cli. I try to display (in the main component) the text which are enter in the input (in the child component). it's work (so strange) but there are an error message :

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>

I search on internet and there a lot of example to resolve this error but not with the architecture vue-cli. I don't understand that...

Step by step :

I write a component :

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

and a child Components :

<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>
1
  • can I see component Signup ? Commented Dec 29, 2017 at 13:17

1 Answer 1

2

In vue-2.x, if you bind a property using v-model and that property doesn't exist (test in this case), then you will get the error.

Try this: added test property.

<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>
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you, my bad, i forgot data. in v-model="test" :)
Rephrasing OP, the solution was to changing it to v-model="data.test"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.