Vue計算的setter得不到v模型中的數組觸發

Question

我有一個字符串管道的值，我想修改。串管具有0-5值的範圍，所以我做了以下內容：

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    valuesString: "" 
 
    }, 
 
    computed: { 
 
    values: { 
 
     get() { 
 
     \t var values = this.valuesString ? this.valuesString.split("-") : []; 
 
     if(values.length < 5) 
 
     \t 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財產getn't的setter方法調用。

我的用例是一個類似過濾器的過濾器。我從我的路由器獲取valuesString作爲參數。用戶應該能夠選擇1-5個類別進行過濾。每次過濾器改變時，路由器參數應該改變，並且應該出現新的空選擇，直到設置了5個類別。

Answer 1

我不完全明白你在找什麼，但我認爲這將這樣的伎倆：

• 解析管道字符串，並將其放置在一個數組
  • 見計算屬性unpiped
• 循環通過陣列和放置值在選擇框
  • 循環應該發生在。結果綁定到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 = "" 
} 
} 
}); 

Answer 2

莫比我的問題不明確。 Bert's comment is right

我用解決方法解決了我的問題，但我不太滿意。任何人都可以幫助我優化它。爲此，我嘗試使用計算的setter。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    values: [], 
 
    valuesString: "", 
 
    allValues: [...Array(5).keys()] 
 
    }, 
 
    watch: { 
 
    values (val) { 
 
     if(val.toString() != this.filteredValues.toString() && val.toString() != this.filteredValues.concat([null]).toString()) 
 
     this.$set(this, 'values', this.filteredValues); 
 
     else if (this.valuesString != this.filteredValues.join('-')) 
 
     this.$set(this, 'valuesString', this.filteredValues.join('-')); 
 
    }, 
 
    valuesString (valuesString) { 
 
     this.$set(this, 'values', valuesString.split('-')); 
 
    } 
 
    }, 
 
    computed: { 
 
    filteredValues() { 
 
     return this.values.filter(v => v); 
 
    }, 
 
    modelArray() { 
 
     let size = this.filteredValues.length; 
 
     if(size < 5) 
 
     size++; 
 
     return new Array(size); 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <div v-for="(value, i) in modelArray" :key="i"> 
 
    <select v-model="values[i]" style="width: 200px"> 
 
     <option></option> 
 
     <option v-for="(v, j) in allValues" :key="j" v-if="v == values[i] || filteredValues.indexOf(v.toString()) === -1">{{ v }}</option> 
 
    </select> 
 
    </div> 
 
    <br> 
 
    <span>valuesString: <input v-model="valuesString" /></span> 
 
    <br> 
 
    <span>values: {{ values }}</span> 
 
    <br> 
 
    <span>filteredValues: {{ filteredValues }}</span> 
 
</div>