这是我在 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>
元素未更新...
我做错了什么?这看起来很简单。感谢您的建议,并为我指明了正确的方向。
最佳答案
在组件中,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>
关于javascript - 为什么 v-model 不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47823702/