Vue的計算二傳手不是複選框工作？

Question

我有一個計算的二傳手：

rating: { 
    get() { 
     return this.$store.state.rating; 
    }, 

    set(value) { 
     console.log(value); 

     this.$store.commit('updateFilter', { 
      name: this.name, 
      value 
     }); 
    } 
} 

這一點與我的評價，像這樣：

<label> 
    <input type="checkbox" :value="Number(value)" v-model="rating"> 
    {{ index }} 
</label> 

我希望，因爲當我使用一個觀察者觀看更改計算二傳手記錄數組在評分模型上我得到一個數組。

除了每當我使用像上面這樣的計算機設置程序時，只需在選中複選框時輸出true或全部取消選擇時輸出false。

這到底是怎麼回事，我應該只是得到一個數組就像一個守望者是怎樣的？

Answer 1

v-model有一定的"magical"行爲，特別是當applied to checkboxes。當綁定到一個數組時，該複選框會根據其選中的狀態向該數組添加或刪除值。

這是不是在你的例子清楚什麼value是Number(value)。它應該是一個值，您希望包含在數組中時，該框被選中。

以上面鏈接的Vue文檔爲例，我已將其修改爲使用計算，並且按照您的預期工作，set獲取數組的新值。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    checkedNames: [] 
 
    }, 
 
    computed: { 
 
    proxyCheckedNames: { 
 
     get() { 
 
     return this.checkedNames; 
 
     }, 
 
     set(newValue) { 
 
     this.checkedNames = newValue; 
 
     } 
 
    } 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <input type="checkbox" id="jack" value="Jack" v-model="proxyCheckedNames"> 
 
    <label for="jack">Jack</label> 
 
    <input type="checkbox" id="john" value="John" v-model="proxyCheckedNames"> 
 
    <label for="john">John</label> 
 
    <input type="checkbox" id="mike" value="Mike" v-model="proxyCheckedNames"> 
 
    <label for="mike">Mike</label> 
 
    <br> 
 
    <span>Checked names: {{ checkedNames }}</span> 
 
</div>