Search code examples
vue.jsvuejs2vuex

true / false in input (vuejs), probably without v-model


I have an array with many checkbox.

      <li v-for='item in resultQuery' :key='item.id'>
        <label class='custom-checkbox'>
          <input type='checkbox' :value='item.id' v-model='checkBrands'>
          <span @click='loadProducts(item.seoName)>{{ item.title }}</span>
        </label>
      </li>

I need to get true or false (depends on checkbox). How can I do this without affecting the v-model? (Use it to transfer an array of selected checkbox).

Needed to trigger a specific mutation

       .then((response) => {
          if(true) {
            this.$store.commit(
              'showFilteredList',
              response.data.items
            );
          } else {
            this.$store.commit(
              'deleteCheckboxItems',
              response.data.items
            );
          }
        });

Solution

  • You can using @change on checkbox.

    Example: https://codepen.io/koei5113/pen/ZEXLLgL

    <input type='checkbox' :value='item.id' v-model='checkBrands' @change="changeEvent">
    
    methods: {
        ...,
        changeEvent($event) {
            console.log($event.target.checked);
        }
    }
    

    In this example you can see your v-model still working and you still can check checkbox status by the change event.