javascript - 为什么 v-model 不起作用？

Question

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

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>