javascript - 选择另一个 V-for 内具有默认值 V-for 的框

Question

我有一个项目列表，人们可以添加新项目。 该项目应该有一个选择框，并且从选择框中选择的值应该是项目值。

所以我尝试通过v-for key将选择绑定(bind)到项目，如下所示

<div id="app">

{{message}}
<span v-on:click="addNewItem">Add New item</span>
<section v-for="(item, key) in items">
{{item.val}}
  <select v-modal="items[key].val">
    <option v-for="default in defaults.selectBox">{{default}}</option>
  </select>
</section>
</div>

JS

new Vue({
el:'#app',
data: {
message: 'testing',
        defaults:{ selectBox : ['VUE','REACT','ANGULAR']},//some default vaues
    items: [{val:'VUE'},{val: 'REACT'}] //intial two items

   },
  methods:{
  addNewItem:function(){ //add new dynamic items
  this.items.push({val:''});
  }
  }
});

但它甚至没有显示选择框。

我在这里做错了什么。如何实现这一点(应将选定的值添加到项目值中)？

https://jsfiddle.net/xdx2bbhm/

Answer 1

通过其他任何方式更改 option 的 v-for 中的 default 变量来纠正问题

default 是 JavaScript 保留关键字，VueJS 不允许将其用作属性名称

new Vue({
  el:'#app',
  data: {
  	message: 'testing',
		defaults: { 
    	selectBox : ['VUE','REACT','ANGULAR'] //some default vaues
    },
    items: [{val:'VUE'},{val: 'REACT'}] // intial two items
  },
  methods: {
    addNewItem: function() { // add new dynamic items
    	this.items.push({val:'TEST '+this.items.length});
  	}
  }
});

<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<div id="app">
{{message}}
<span v-on:click="addNewItem">Add New item</span>
<section v-for="(item, key) in items">
{{item.val}}
  <select>
    <option v-for="defaultx in defaults.selectBox">{{ defaultx }}</option>
  </select>
</section>
</div>