javascript - Vue 计算的 setter 不会为 v-model 中的数组触发

Question

我有一个值的字符串管道，我想修改它。字符串管道的值范围为 0-5，因此我做了以下操作:

new Vue({
  el: '#app',
  data: {
    valuesString: ""
  },
  computed: {
    values: {
      get() {
      	var values = this.valuesString ? this.valuesString.split("-") : [];
        if(values.length < 5)
        	values.push(null);
        return values;
      },
      set(values) {
        this.valuesString = values.filter(value => value).join("-")
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div v-for="(value, i) in values" :key="i">
    <select v-model="values[i]" style="width: 200px">
      <option></option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <br>
  <span>valuesString: {{ valuesString }}</span>
  <br>
  <span>values: {{ values }}</span>
</div>

现在的问题是，我计算的 values 属性的 setter 没有被调用。

我的用例是一个类似于类别过滤器的过滤器。我从路由器获取 valuesString 作为参数。用户应该能够选择 1-5 个类别进行过滤。每次过滤器更改时，路由器参数都应该更改，并且应该出现一个新的空选择，直到设置了 5 个类别。

Answer 1

我不完全确定我明白你在找什么，但我认为这会成功:

• 解析管道字符串并将其放入数组中
  • 查看未通过管道传输的计算属性
• 遍历数组并将值放在选择框中
  • 循环应该发生在 .结果绑定(bind)到valuesString
• 应将所选值推送到结果数组并清除选择框。
  • 查看 pushValues 方法。

Jfiddle example

<div id="app">
 <div>
   <select v-model="valuesString" @change="pushValues" style="width: 200px">
    <option v-for="p in unpiped">{{p}}</option>
    </select>
  </div>
<br>
  <span>valuesString: {{ valuesString }}</span>
<br>
  <span>unpiped: {{ unpiped }}</span>
 <br>
   <span>results: {{ results }}</span>
</div>

JS:

new Vue({
el: '#app',
 data: {
  valuesString: "",
  piped: "1|2|3|4|5",
  results: []
 },
 computed: {
  unpiped(){
    var v = this.piped.split("|");
    return v;
 },
},
 methods: {
   pushValues: function(){
    this.results.push(this.valuesString)
    this.valuesString = ""
 }
}
});