This is my very first code in Vue.js. I am following a simple online tutorial. After installing the application using the vue-cli, I created a simple ponent Test.vue which contains a simple input control bound to the message property of my model:

Test.vue

<template>
  <div 
    <input 
        type="text" 
        v-model="message"/>
    <br/>
    <p>The value of the input is: {{ message }}</p>
  </div>
</template>

<script>
    export default {  
      data:{
        message: 'My name'
      }
    };
</script>

<style>
</style>

Then I load this ponent inside the <App />. But when I write a text inside the input box, the <p> element is not updated...

What am I doing wrong? This looks pretty straightforward. Thanks you for your suggestions and pointing me to the right direction.

This is my very first code in Vue.js. I am following a simple online tutorial. After installing the application using the vue-cli, I created a simple ponent Test.vue which contains a simple input control bound to the message property of my model:

Test.vue

<template>
  <div 
    <input 
        type="text" 
        v-model="message"/>
    <br/>
    <p>The value of the input is: {{ message }}</p>
  </div>
</template>

<script>
    export default {  
      data:{
        message: 'My name'
      }
    };
</script>

<style>
</style>

Then I load this ponent inside the <App />. But when I write a text inside the input box, the <p> element is not updated...

What am I doing wrong? This looks pretty straightforward. Thanks you for your suggestions and pointing me to the right direction.

• javascript
• vue.js
• vuejs2

1 Answer 1

In a ponent, data must be a function.

export default {  
  data(){
    return {
      message: 'My name'
    }
  }
};

Also, your template is missing a > in the first div, but I'm guessing that happened writing the question.

<template>
  <div>
    <input 
        type="text" 
        v-model="message"/>
    <br/>
    <p>The value of the input is: {{ message }}</p>
  </div>
</template>