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

user_4812154 0
Viewed 232

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>
vuejs2 vue-component css javascript
2 Answers

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/

user_6618720

You should set the source of truth in your model, not in your rendering.

You should have something like

mounted() {
  this.categories[0].id=true;
}

however, it's not clear what the structure of categories is. Is it an array? If so, you should initialized it as an empty array instead of an object. Also, if you should probably be using v-model instead of :value so that changes in checked status are saved in the model. Finally, I'm not sure if you want the model to be linked to the id attribute. Probably there is another attribute that you want to bind.

user_17067440
Related