VueJSのチェックボックスの値をnullオブジェクトにバインドする方法はありますか？

Question

選択したすべてのチェックボックス項目をプロパティに格納しようとしています。

これは私のオブジェクトモデルの「汎用」プロパティです。これは、すべての異なるタイプのデータを保持します。

このプロパティはnullとして初期化されるため、Vueは配列であると認識しません。したがって、チェックボックスの値を1つだけこのプロパティにバインドします。

[]を使用してこのプロパティを初期化して配列として宣言すると、意図したとおりに機能します。しかし、オブジェクトはJSONとして外部に渡されるため、配列として初期化することはできません。

var working = new Vue({ 
    el: "#a", 
    data: { 
     options: ["Apple", "Banana", "Citrus"], 
     answers: [], //<- I'm unable to do this in my scenario 
    } 
}); 

var notWorking = new Vue({ 
    el: "#b", 
    data: { 
     options: ["Apple", "Banana", "Citrus"], 
     answers: null 
    } 
}); 

ここで私は何を意味するのかを示した簡単なJSfiddleです。

https://jsfiddle.net/ojvfy39p/12/

は、私は「実施例」とは何を達成するために「非作業例」にどのような調整を行う必要がありますか？私は

Answer 1

の代わりにv-modelの代わりにイベントを使ってメソッドをトリガすることができます。

var working = new Vue({ 
 
    el: "#a", 
 
    data: { 
 
    \t options: ["Apple", "Banana", "Citrus"], 
 
    \t answers: [], //<- I'm unable to do this in my scenario 
 
    } 
 
}); 
 

 
var notWorking = new Vue({ 
 
    el: "#b", 
 
    data: { 
 
    \t options: ["Apple", "Banana", "Citrus"], 
 
    \t answers: null 
 
    }, 
 
    methods: { 
 
    \t updateAnswers(val) { 
 
     if(this.answers === null) { 
 
      this.answers = [val]; 
 
     } else if(this.answers.indexOf(val) > -1) { 
 
      this.answers.splice(this.answers.indexOf(val), 1); 
 
     } else { 
 
      this.answers = [...this.answers, val]; 
 
     } 
 
     }, 
 
    } 
 
}); 
 

 
console.clear();

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 

 
Working example. "Answers" initialized as array. 
 
<form id="a"> 
 
<div v-for="(option,i) in options"> 
 
    <input type="checkbox" :value="option" name="option" v-model="answers"/> {{ option }} 
 
</div> 
 
    <br> 
 
    Selected items: {{ answers }} 
 
</form> 
 
<br> 
 

 
Not working example, "Answers" initialized as null 
 
<form id="b"> 
 
<div v-for="option in options"> 
 
    <input type="checkbox" :value="option" name="option" @click="updateAnswers(option)" /> {{ option }} 
 
</div> 
 
    <br> 
 
    Selected items: {{ answers }} 
 
</form>