更新Vue中选定对象的值答案

【问题标题】：Update the value of a selected object in Vue更新Vue中选定对象的值
【发布时间】：2017-04-25 00:27:52
【问题描述】：

我想从多选字段中选择一个选项并更新所选对象的 prozent 值：

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

此代码为每个选定的选项创建一个输入，但整个选项文本作为值存储在输入中。它也不会更新对象的属性。

【问题讨论】：

我没有得到问题所在，但您需要注意的事项很少。 1. assistenz 存储为字符串，您尝试对其使用array.push。 2. 您正在尝试遍历仍然是字符串的assistenz。
好的，我想用一个或多个选项替换assistenz，并在下一步更新所选选项的prozent值。
v-model 已经绑定了值。同时使用v-bind:value 没有意义。如果你同时拥有这两种情况，我不确定这会导致什么行为。
好吧，我不确定如何更新数组元素的属性 - 我可以更新整个数组的属性，但如何访问其中一项？

标签： javascript vue.js

【解决方案1】：

目前我更喜欢“手表”：

watch: {
  multiselect: function(indexes) {
    for(var i = 0; i < this.options.length; i++) 
      this.options[i].show = indexes.indexOf(i) > -1;
    }
}

完整示例：

https://jsfiddle.net/4xq3mj9o/

【讨论】：

【解决方案2】：

为了更新所选对象的值，我在 for 循环中迭代了 Item 并将输入模型绑定到 items 值：

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

【讨论】：

【解决方案3】：

使用vue-multiselect

就用这样的东西

<Multiselect :options="Options" :value="Values" :multiple="true" @update="updateMultiValue"> </Multiselect>

【讨论】：