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>