Question

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

所以我尝试通过public ViewResolver getViewResolver() { InternalResourceViewResolver resolver = new InternalResourceViewResolver(); resolver.setPrefix("WEB-INF/view/"); resolver.setSuffix(".html"); return resolver; }将选项绑定到项目，如下所示

v-for key

JS

<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>

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

我在这里做错了什么。如何实现这一点（选择值应该放在项目val上）？

https://jsfiddle.net/xdx2bbhm/

Answer 1

更改default＆＃39; option中的v-for变量以及更正问题的其他内容

default是一个JavaScript保留关键字，VueJS不允许将其用作媒体资源名称

＆＃13;

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});
  	}
  }
});

＆＃13;

<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>

＆＃13;

Answer 2

这只是一个拼写错误。而不是v-model它应该是declval

这是工作fiddle

选择具有默认值V的Box，用于另一个V-for

2 个答案: