Vue.js：組複選框選中，如果

我曾在我的舊車把鑑於以下複選框說法是正確的：作爲託運Vue.js：組複選框選中，如果

<div class="form-group"> 
    <input type='checkbox' name='xmlOnline[]' value="stepstone" class='' {{#if (ifIn 'stepstone' job.xmlOnline)}} checked="checked" {{/if}}> Stepstone 
    <input type='checkbox' name='xmlOnline[]' value="karriere" class='' {{#if (ifIn 'karriere' job.xmlOnline)}} checked="checked" {{/if}}> Karriere 
</div>

所以，如果job.xmlOnline有「達石」的價值，應該將其標記。「karriere」也一樣。

現在我想實現在Vue.js同樣的事情對我的POST形式。這是對象「工作」的樣子：http://t2w-api.herokuapp.com/jobs/590c20d42b1c4300046bb1b9

因此，它可以包含「karriere」，「stepstone」，兩者或「null」。

我得到了我的組件至今：

<div v-for="(xml, index) in job.xmlOnline"> 
    <input type="checkbox" :checked="xml == 'stepstone'"> Stepstone {{ index }} 
    <input type="checkbox" :checked="xml == 'karriere'"> Karriere {{ index }} 
</div>

複選框得到遏制，但我讓他們重複。我也不知道如何添加V模型。

這是我的組件的來源。做類似的東西有「資格」/ 「責任」：https://github.com/markusdanek/t2w-vue/blob/mdanek/2-auth-system/src/components/backend/JobEdit.vue

來源

2017-05-15 mrks

一個可能的解決方案

<input type="checkbox" 
     :checked="job.xmlOnline && job.xmlOnline.includes('stepstone')" 
     @change="onChange('stepstone', $event)"> Stepstone 
<input type="checkbox" 
     :checked="job.xmlOnline && job.xmlOnline.includes('karriere')" 
     @change="onChange('karriere', $event)"> Karriere

而且方法的onChange

methods:{ 
    onChange(value, $event){ 
    if (!this.job.xmlOnline) 
     this.job.xmlOnline = [] 

    const index = this.job.xmlOnline.findIndex(v => v == value) 
    const checked = $event.target.checked 

    if (checked && index < 0) 
     this.job.xmlOnline.push(value) 
    if (!checked && index >= 0) 
     this.job.xmlOnline.splice(index, 1) 
    } 
}

Example。

來源

2017-05-15 15:20:21 Bert

謝謝！工作完美:) 你能幫助我，當我添加一個新的工作，我將如何發佈此複選框？ https://jsfiddle.net/ush3mps5/ – mrks

我也忘了，這也有可能，這job.xmlOnline還可以包含什麼。：/ – mrks

@mrks當你什麼也沒說你是指它是空的，或者它是一個空的數組。如果它是一個空數組，它仍然會像答案一樣工作。至於你如何發佈它，這取決於你的服務器端。 – Bert

Vue.js：組複選框選中，如果

回答

相關問題