Javascript 更新Vue中选定对象的值
我想从多选字段中选择一个选项,并更新所选对象的比例值:Javascript 更新Vue中选定对象的值,javascript,vue.js,Javascript,Vue.js,我想从多选字段中选择一个选项,并更新所选对象的比例值: <div id="assistenzen"> <form> <select v-model="assistenz" multiple> <option v-for="option in options" v-bind:value="option"> {{ option.text }} </option> </select
<div id="assistenzen">
<form>
<select v-model="assistenz" multiple>
<option v-for="option in options" v-bind:value="option">
{{ option.text }}
</option>
</select>
<ul>
<li v-for="(assi, prozent) in assistenz">{{assi.text}}
<input v-model="assistenz" v-bind:value="prozent">
{{assi.prozent}}
</li>
</ul>
</form>
</div>
<script>
var assistenz = new Vue({
el: '#assistenzen',
data: {
assistenz: 'keine Assistenz',
options: [
{ text: 'One', value: 'A', prozent: '0' },
{ text: 'Two', value: 'B', prozent: '0' },
{ text: 'Three', value: 'C', prozent: '0' }
]
},
});
assistenz.config.devtools = true
</script>
此代码为每个选定选项创建一个输入,但整个选项文本作为值存储在输入中。它也不会更新对象的属性。使用
就用这样的东西
<Multiselect :options="Options" :value="Values" :multiple="true" @update="updateMultiValue"> </Multiselect>
要更新choosen对象的值,我必须在for循环中迭代该项,并将输入模型绑定到该项值:
<div id="assistenzen">
<form>
<select v-model="assistenz" multiple>
<option v-for="option in options" v-bind:value="option">
{{ option.text }}
</option>
</select>
<ul>
<li v-for="assi in assistenz">{{assi.text}}
<input v-model="assi.prozent">
{{assi.prozent}}
</li>
</ul>
</form>
</div>
<script>
var assistenz = new Vue({
el: '#assistenzen',
data: {
assistenz: 'keine Assistenz',
options: [
{ text: 'One', value: 'A', prozent: '0' },
{ text: 'Two', value: 'B', prozent: '0' },
{ text: 'Three', value: 'C', prozent: '0' }
]
},
});
assistenz.config.devtools = true
</script>
目前我更喜欢“手表”:
watch: {
multiselect: function(indexes) {
for(var i = 0; i < this.options.length; i++)
this.options[i].show = indexes.indexOf(i) > -1;
}
}
完整示例:
我不知道是什么问题,但有几件事你必须注意。1.assistenz存储为字符串,您尝试使用array.push。2.您正在尝试迭代仍然是字符串的assistenz。好的,我希望将assistenz替换为一个或多个选项,并在下一步更新所选选项的prozent值。v-model已绑定该值。。同时使用v-bind:value是没有意义的。我不确定如果两者都有,会导致什么行为。好的,我不确定如何更新数组元素的属性-我可以更新整个数组的属性,但如何访问其中一个项目?