选择标签值不反映v模型的变化

Question

标签上的v-model不能反映刀片模板中的任何变化。

我用一个空的html文件尝试了此操作，但是它可以正常工作，但仅在刀片模板中出现了问题

//刀片

<div id="fruit-container">
<select  v-model="fruit">
    <option disabled value="">Choose a fruit</option> 
    <option>Apple</option>
    <option>Banana</option>
    <option>Strawberry</option>
   </select>
 <span>Fruit chosen: @{{fruit}}</span>
</div>

// js

new Vue({
 el:'#fruit-container',
 data:{fruit:""}
})

当我选择其他选项时，值@{{fruit}}永远不会显示，而且这仅在刀片服务器中不起作用，我想知道我在这里做错了什么吗？

Answer 1

我认为您需要将data更改为此：

data() {
  return { fruit: '' }
}