綁定特定複選框以禁用VueJS中的特定下拉菜單？

Question

我有一個表，每一行都有一個複選框，名稱，另一個複選框和下拉列表。我希望默認情況下禁用下拉列表，並且僅在檢查第一個複選框時啓用它。

這裏的HTML：

<tbody> 
    <tr v-for="item in Items" v-bind:id="item.ID"> 
     <td> 
      <!-- check this checkbox and enable/disable the dropdown --> 
      <input type="checkbox" v-on:click="onSelect($event)" v-model="item.Selected" /> 
     </td> 
     <td> 
      {{ item.Name }} 
     </td> 
     <td> 
      <input type="checkbox" v-model="item.isActive" />< 
     <td> 
      <!-- enabled/disabled depending on if checkbox is checked --> 
      <select v-bind:disabled=""> 
       <option value="foo">foo</option> 
       <option value="bar">bar</option> 
      </select> 
     </td> 
    </tr> 
</tbody> 

目前，onSelect($event)方法將檢查第二個複選框在同一行中選中時。

這裏是我的JavaScript：

var vm = new Vue({ 
    el: '#app', 
    data: { 
     items: items 
    }, 
    methods: { 
     onSelect: function (event, id) { 
      setTimeout(function() { 
       var idx = $(event.target).closest('tr').index(); 
       if (items[idx].Selected) { 
        items[idx].isActive = true; 
       } 
      }, 100); 
     } 
    } 
}); 

是否有下拉的啓用/禁用綁定與VueJS 2/JavaScript的/ jQuery的複選框的方法嗎？

Answer 1

您實際上並不需要使用jQuery或事件，而只需使用Vue的數據綁定即可。只需在第一個複選框上設置v-model="item.Selected"，然後在選擇上設置v-bind:disabled="!item.Selected"。

HTML：

<!-- index.html --> 
<div id="app"> 
    <table> 
    <tbody> 
     <tr v-for="item in items"> 
     <td> 
      <!-- check this checkbox and enable/disable the dropdown --> 
      <input type="checkbox" v-model="item.Selected"/> 
     </td> 
     <td> 
      {{ item.Name }} 
     </td> 
     <td> 
      <!-- enabled/disabled depending on if checkbox is checked --> 
      <select v-bind:disabled="!item.Selected"> 
      <option value="foo">foo</option> 
      <option value="bar">bar</option> 
      </select> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

的JavaScript：

// app.js 
const vm = new Vue({ 
    el: '#app', 
    data() { 
    return { 
     items: [ 
     { ID: 1, Name: 'name 1', isAcitve: false, Selected: false }, 
     { ID: 2, Name: 'name 2', isAcitve: false, Selected: false }, 
     { ID: 3, Name: 'name 3', isAcitve: false, Selected: false }, 
     ] 
    } 
    }, 
}) 

我已經附加a pen which displays this。