In Vue 2 how to have only 1st input type checkbox checked in v-for loop

Issue

Thanks for having look I'm kinda stuck.Trying to figure out how to have first checkbox rendered checked by default.

Here is my JS the categories are coming in dynamically

Vue.component('category-filter', {
  template: '#category-filter-template',
  props: {
    appMounted: false,
  },
  data() {
    return {
      categories: {},
      checkedState: false,
    };
  },
  methods: {
    handleCheckboxClicked(e) {
      console.log({ e });
    },
  },
  mounted() {
    this.appMounted = true;
    this.categories =jsContext.categories
  },
});

Here is my template I have choose to make styles inline to make component more reusable

<div
  class="filter-container--wrapper"
  style="
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 2rem;
    color: #fff;
    background-color: #5676a7;
    border-radius: 5px;
  "
>
  <div
    id="filter-item"
    style="padding: 15px"
    v-for="category in categories"
    :key="category.id"
  >
    <input
      id="category-name"
      type="checkbox"
      @click="handleCheckboxClicked($event)"
      :value="category.id"
      :checked="checkedState"
    />
    <label for="category-name">
      <span>\{{category.name}}</span>
    </label>
  </div>
</div>

Solution

You can initialy define the value as checked by setting it when you setup the data for the model:

this.categories = Array.from(jsContext.categories || []).map((v,i) => (v.checked = !i, v));

Various issues:

• You should use a model instead of :value, then change the model to checked.
• Don't mutate props!
• If categories is an array then set it as array in data, not object.
• Is better to use computed props for the inline style, or if possible always put it in your CSS file or in <style>, you can scope it #category-filter-template .filter-container--wrapper {} if you don't want it conflicting.

<template id="category-filter-template">
  <div class="filter-container--wrapper" :style="wrapperStyle">
    <div
      id="filter-item"
      :style="itemStyle"
      v-for="category in categories"
      :key="category.id"
    >
      <input
        id="category-name"
        type="checkbox"
        v-model="category.checked"
        :checked="category.checked"
      />
      <label for="category-name">
        <span>\{{category.name}}</span>
      </label>
    </div>
  </div>
</template>

Then your component:

Vue.component('category-filter', {
  template: '#category-filter-template',
  data() {
    return {
      categories: []
    };
  },
  computed: {
    wrapperStyle () {
      return {
      'display': 'flex',
      'flex-wrap': 'wrap',
      '-webkit-box-pack': 'center',
      '-ms-flex-pack': 'center',
      'justify-content': 'center',
      'margin-bottom': ' 2rem',
      'color': '#fff',
      'background-color': ' #5676a7',
      'border-radius': ' 5px'
      }
    },
    itemStyle () {
      return {
        'padding': '15px'
      }
    }
  },
  mounted() {
    this.categories = Array.from(jsContext.categories || []).map((v,i) => (v.checked = !i, v))
  },
})

See working online: https://playcode.io/847454/

Answered By - Lawrence Cherone