CODEWITHSUNDEEP
vue.jscheckbox
eozzy
eozzy

Reputation: 68660

Checkbox list without using v-model

Vue has a good example of using multiple checkboxes with the same name attribute bound to the same array using v-model

However, I can't use v-model for some reason so I must use @input to emit checked while keeping the value unchanged.

Its not working for me though, all the checkboxes are checked/unchecked at the same time or I have to change the value which I don't want.

Is there a workaround?

Code: https://codesandbox.io/s/71pm2wllp1?fontsize=14

Upvotes: 3

Views: 1020

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

Vue generates special code when compiling a template containing checkboxes bound in this way. Since you're not using v-model, you'll have to handle this functionality yourself.

Try something like this:

new Vue({
  el: '#app',
  data: {
    checkboxes: [
      { name: 'jack', value: 'Jack' },
      { name: 'bob', value: 'Bob' },
      { name: 'alice', value: 'Alice' },
    ],
    model: [],
  },
  computed: {
    modelJson() {
      return JSON.stringify(this.model);
    },
  },
  methods: {
    handleChange(value, checked) {
      if (checked) {
        this.model = this.model.concat(value);
      } else {
        this.model = this.model.filter(x => x !== value);
      }
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="checkbox of checkboxes" :key="checkbox.name">
    <input
      type="checkbox"
      :id="checkbox.name"
      :name="checkbox.name"
      :value="checkbox.value"
      :checked="model.includes(checkbox.value)"
      @change="handleChange(checkbox.value, $event.target.checked)"
    />
    <label :for="checkbox.name">{{ checkbox.value }}</label>
  </div>
  <pre>{{ modelJson }}</pre>
</div>

Upvotes: 4

Related Questions