Как сделать так, чтобы флажок Vuetify точно отражал его значение? - PullRequest
Новая
       19

Как сделать так, чтобы флажок Vuetify точно отражал его значение?

0 голосов
/ 27 мая 2019

Я пытаюсь установить флажок vuetify, чтобы точно отображать правильное проверенное значение.Например, я делаю флажок «все» с 3 состояниями [все, некоторые, нет].Если состояние не установлено, флажок должен быть снят.Если состояние - все, тогда это должно быть проверено, и это означает, что оно неопределенно.Моя проблема заключается в том, что когда входное значение рассчитывается как ложное, а v-флажок щелкается, флажок будет отображаться как отмеченный, даже если значение, передаваемое компоненту, говорит о том, что его не следует проверять.Как сделать так, чтобы флажок всегда был таким, как указано во входном значении?

https://codepen.io/anon/pen/QRxoqL?&editable=true&editors=101

<v-checkbox :input-value="val"></v-checkbox>
...
data(){
  return {
    val: false,
  }
},

Это более простая версия, но она иллюстрирует мою проблему.Когда я нажимаю флажок в непроверенном состоянии, он должен оставаться непроверенным, если переменная «val» не изменится на true.Это позволит мне использовать метод, чтобы определить, в каком состоянии должен отображаться флажок, и фактически отображать его.

1 Ответ

0 голосов
/ 28 мая 2019

Мне удалось решить эту проблему с помощью атрибута readonly и обернуть флажок в промежуток, в который был @click, к которому будет распространяться событие.

https://codepen.io/RuttyJ/pen/MdXRXQ?editors=1010

<span @click="toggleValue()">
    <v-checkbox readonly :input-value="val"></v-checkbox>
</span>
...