Как сделать, чтобы checkbox уже был заранее нажат?

Question

[Anton8989]

Добрый день, имеется пример кода jsfiddle.net/bmpfs2w2 , как сделать так чтобы чекбокс при загрузке старницы уже сразу был нажат и сразу было передано значение? заранее спасибо)

Answer 1

[0xD34F]

• Вариант раз.
  
  Добавить элементам массива mainCategories свойства, которые будут отвечать за состояния чекбоксов (по умолчанию имеют значения true); массив checkedCategories сделать вычисляемым:
  
  

  data: () => ({
    mainCategories: [
      { merchantId: '1', checked: true },
      { merchantId: '2', checked: true },
      ...
    ],
  }),
  computed: {
    checkedCategories() {
      return this.mainCategories.filter(n => n.checked).map(n => n.merchantId);
    },
  },

  
  

  <li v-for="n in mainCategories">
    <label>
      <input type="checkbox" v-model="n.checked">
      {{ n.merchantId }}
    </label>
  </li>

  
  
  
• Вариант два.
  
  При создании экземпляра компонента заполнить массив checkedCategories нужными значениями:
  
  

  created() {
    this.checkedCategories = this.mainCategories.map(n => n.merchantId);
  },

  
  
  

Answer 2

[Vitaliy]

jsfiddle.net/Ni55aN/bmpfs2w2/17