Vuejs禁用選定的下拉選項？

我有一個數組selected它擁有一組選定的選項。我想使用該數組在這些選項上添加disabled屬性。Vuejs禁用選定的下拉選項？

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title> Vue-js Control </title> 
    </head> 
    <body> 
     <div id="demo"> 
      <select v-model="selected" multiple> 
       <option v-for="option in options" v-bind:value="option.value"> 
       {{ option.text }} 
       </option> 
      </select> 
      <span>Selected: {{ selected }}</span> 
     </div> 

    <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js'></script> 
    <script type="text/javascript"> 
    new Vue({ 
     el: '#demo', 
     data: { 
      selected: ['A','B','D'], 
      options: [ 
       { text: 'One', value: 'A' }, 
       { text: 'Two', value: 'B' }, 
       { text: 'Three', value: 'C' }, 
       { text: 'Four', value: 'D' }, 
       { text: 'Five', value: 'E' }, 
       { text: 'Six', value: 'F' }, 
       { text: 'Seven', value: 'G' }, 
      ] 
     } 
    }); 
    </script> 
</body>

來源

2016-02-24 Renish Khunt

您要禁用屬於所選陣列中的所有選項？

<option v-for="option in options" :disabled="selected.includes(option.value)" :value="option.value">

來源

2016-02-24 06:44:35 Jeff

嗨，傑夫，它的工作，但是當我選擇新的選項，然後它刪除禁用的選項。我認爲這是錯誤 –

@renishkhunt這是因爲無法選擇禁用的選項。所以當你禁用它們時，'v-model'將它們從數組中取出。沒有辦法讓他們同時被禁用和選擇。 – Jeff

反正jeff這對我真的很有幫助謝謝你這麼多:) –

Vuejs禁用選定的下拉選項？

回答

相關問題