如何將複選框值綁定到VueJS中的空對象？

Question

我試圖將所有選中的複選框項存儲在屬性中。

這是我的一個對象模型中的'generic'屬性，它包含所有不同類型的數據。

該屬性初始化爲空，所以Vue不理解它應該是一個數組。所以它只會將一個複選框的值綁定到這個屬性。

當我使用[]將其聲明爲數組初始化此屬性時，它按預期工作。但是，這些對象以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>