How to make the checkbox already pre-clicked?

Question

Vue.js

Good afternoon, there is a code example jsfiddle.net/bmpfs2w2 , how to make the checkbox when loading the page was immediately clicked and the value was immediately transferred? thanks in advance)

Answer 1

• Option times.
  Add properties to the elements of the mainCategories array that will be responsible for the states of the checkboxes (they have the values ​​true by default); make the array checkedCategories computed:
  

  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>

  
  
• Option two.
  When creating a component instance, fill the checkedCategories array with the desired values:
  

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

  
  

Answer 2

jsfiddle.net/Ni55aN/bmpfs2w2/17