为什么v-model不工作？

Question

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

  

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>

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

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

Answer 1

在组件data must be a function。

中

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

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

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