为什么v模型不起作用？

Question

这是我在Vue.js中的第一个代码。我正在关注一个简​​单的在线教程。使用vue-cli安装应用程序后，我创建了一个简单的组件 Test.vue，其中包含绑定到我模型的message属性的简单输入控件：

测试值

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

然后，我将该组件加载到中<App />。但是当我在输入框中输入文本时，该<p>元素不会更新...

我究竟做错了什么？这看起来非常简单。感谢您的建议，并指出正确的方向。

Answer 1

在组件中，数据必须是一个函数。

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

另外，您的模板>在第一个div中缺少a ，但是我猜这是在写问题时发生的。

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