Vue不確定複選框綁定

我正在使用vue進行數據綁定。我想創建一個訪問級別控件的小部件，所以我需要允許，拒絕和不確定狀態。Vue不確定複選框綁定

這個標記是好的，但沒有任何不確定的狀態：

<div class="row" v-for='a in context.This.Actions'> 
    <div class="col-96"> 
     <input class="custom-control-input access-checkbox" v-bind:id="'chk_'+a.Name" v-bind:value="a.Id" v-model="context.This.RoleActions" indeterminate="true" type="checkbox" /> 
     <label class="pointer" v-bind:for="'chk_'+a.Name">{{ a.Name }}</label> 
    </div> 
</div>

的變量是：

context.This.Actions = [ 
    { "Id": "id_1", 
     "Name": "AAA" 
    }, 
    { "Id": "id_2", 
     "Name": "BBB" 
    }, 
    { "Id": "id_3", 
     "Name": "CCC" 
    } 
] 

context.This.RoleActions = [ "id_1", "id_2" ]

我想這種變化：

context.This.RoleActions = [ {"id_1":true}, {"id_2":false} ]

，我希望下面的結果：

第一複選框：檢查
第二複選框：未選中
另一種：不確定

來源

2017-05-09 Mohsen Mirshahreza

不確定是上一個複選框，這意味着把它在一個DOM屬性標記不會產生影響，它需要以編程方式應用。

即使這樣做，請記住複選框的狀態仍未選中或未選中。處理表單時務必記住這一點。區別僅在於視覺。在組件

<input type="checkbox" indeterminate.prop="true">

或綁定到一個動態值：(source)

考慮到這些警告，在Vue公司2，你可以一個不確定的屬性添加到複選框，像這樣

<input type="checkbox" :indeterminate.prop="dataProperty">

我會推薦重新考慮這一點。

來源

2017-10-11 19:33:16

Vue不確定複選框綁定

回答

相關問題