Как использовать Bootstrap button-group rad ios с v-моделью Vue? - PullRequest
Новая
       30

Как использовать Bootstrap button-group rad ios с v-моделью Vue?

0 голосов
/ 11 февраля 2020

Я использую vuejs с bootstrap 4.4. Рефакторинг кода Я хотел бы перейти от вызова методов к использованию v-model (некоторая разметка bootstrap опущена для ясности). Группа кнопок rad ios смоделирована после https://getbootstrap.com/docs/4.0/components/buttons/#checkbox -и-радио-кнопок : 

{{mode}}
<div class="btn-group btn-group-toggle py-4 mb-2" data-toggle="buttons">
    <label>
        <input type="radio" name="mode" value="off" v-model="mode">Stop</input>
    </label>
    <label>
        <input type="radio" name="mode" value="now" v-model="mode">Sofort</input>
    </label>
</div>

mode - это простое свойство: 

data: function () {
  return {
    mode:"pv",
  };
},

К сожалению, после перехода с предыдущей реализации с использованием v-on:click="setMode(...)" на v-model, mode никогда не обновляется, ошибки не выдается.

Состояние bootstrap docs:

Состояние проверки для этих кнопок обновляется только с помощью события нажатия кнопки

Может ли это конфликтовать с обработкой vuejs v-model? Как я могу заставить v-model работать с bootstrap радиогруппами?

1 Ответ

1 голос
/ 12 февраля 2020

Проблема со свойством data-toggle, пока вы ее удаляете, она будет работать. Я попытался с последующим, и это работает, вам просто нужно управлять активным классом с Vue значением переменной. 

<div id="app">
    {{mode}}
    <div class="btn-group btn-group-toggle">
      <label class="btn btn-secondary active">
        <input type="radio" name="options" value="now" id="option1"  v-model="mode" autocomplete="off" checked> Active
      </label>
      <label class="btn btn-secondary">
       <input type="radio" name="options"  value="off" id="option2"  v-model="mode" autocomplete="off"> Radio
      </label>
    </div>
</div>
...