选择标记值不反映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: '' }
}