vue: считать и ставить флажки - PullRequest
Новая
       88

vue: считать и ставить флажки

0 голосов
/ 18 октября 2018

Что я хочу сделать с vue:

  • Подсчет отмеченных флажков
  • Установить все флажки отмеченными (или снять все флажки)

Этоочень упрощенная модель.Настоящий веб-сайт содержит следующие ограничения:

  • Количество флажков изменяется.
  • Значения всегда разные.
  • Я не хочу вводить все входные данные-атрибут в раздел данных Vue

Следующий код позволяет подсчитать количество отмеченных флажков. 

<html>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
      <input type="checkbox" name="abc" value=1 v-model="cch">
      <input type="checkbox" name="abc" value=2 v-model="cch">
      <br/>
      Count: {{cch.length}}
    </div>

    <script>
      new Vue({
          el: '#app',
          data: {
            cch: [],
          },
      })
    </script>
  </body>
</html>

Следующий код проверяет все флажки (и, конечно,, снимает флажки, если chk = false): 

<html>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
      <input type="checkbox" name="abc" value=1 :checked="chk">
      <input type="checkbox" name="abc" value=2 :checked="chk">
      <br/>
      Checked: {{chk}}
    </div>

    <script>
      new Vue({
          el: '#app',
          data: {
            chk: true
          },
      })
    </script>
  </body>
</html>

Кажется, что невозможно использовать: флажок и v-модель в одном входном теге.Что я могу сделать?

Я добавил кнопку, чтобы все флажки были отмечены, и я изменил имена.Проблемы остаются: счет работает хорошо, но кнопка «все» не дает никакого эффекта. 

<html>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
      <input type="checkbox" name="abc1" value=1 v-model="cch" :checked="chk">
      <input type="checkbox" name="abc2" value=2 v-model="cch" :checked="chk">
      <br/>
      Count: {{cch.length}}
      <br/>
      <input type="button" @click="chk=!chk" value="all">
    </div>

    <script>
      new Vue({
          el: '#app',
          data: {
            cch: [],
            chk: true
          },
      })
    </script>
  </body>
</html>

1 Ответ

0 голосов
/ 18 октября 2018

Вам нужно будет установить уникальный атрибут имени для каждого флажка.Таким образом, они корректно работают с v-моделью.

...