vuejs v-model, multiple checkbox and computed property

Question

I am trying to use multiple checkboxes in single file component. And I need to computed property, but I have boolean newVal instead of array in my setter. Here is my code:

var demo = new Vue({
    el: '#demo',
    data: {
        _checkedNames: [] 
    },
    computed: {
      checkedNames: {
        get: function () {
          return this._checkedNames;
        },
        set: function (newVal) {
          console.log(newVal); //with computed we have true/false value instead of array
          this._checkedNames = newVal;
        }
      }
    }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="demo">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

So, you will see boolean value in the console.

Update 1. Detail case explanation

I'm using legacy code of the model, which is being passed as a parameter to vue component. And I need to bind component markup to the model's property (_checkedNames in code above simulates this model property). This property declared via getter/setter (sometimes just getter). And I want to use such a property in v-model construction. This case doesn't work for me. I guess vuejs can't wrap it correctly. And I'm loking for a solution (or a workaround) that will take in account mentioned restrictions.

Here is the same question in vue forum: https://forum.vuejs.org/t/v-model-multiple-checkbox-and-computed-property/6544

could you explain the problem here a little clearer? I didn't get it — Soorena
– Soorena, Commented Feb 15, 2017 at 17:28
thank you for your response, I don't get the question since it lacks very basic implementation instructions given by vue js. for example, why all of these inputs have v-model="checkedNames"? how would you know which one is selected when all of them point to the same boolean value! what is the purpose of using _checkedNames? how it bounds to the template. I just don't get it. — Soorena
– Soorena, Commented Feb 16, 2017 at 14:57
I suggest you to read a little more about Vue js itself on it's website. — Soorena
– Soorena, Commented Feb 16, 2017 at 14:59
@Soorena thanks for your comment. This is multiple checkboxes implementation from vue docs. And _checkedNames need for computed property internal state. Could you check my repo please? — Dmitry Kurmanov
– Dmitry Kurmanov, Commented Feb 16, 2017 at 15:04
I cloned it, it was working perfectly fine with ES6 implentation that I replaced with the typescripts. I couldn't find the problem with ts. sorry — Soorena
– Soorena, Commented Feb 16, 2017 at 18:20

Soorena · Accepted Answer · 2021-08-16 14:36:50Z

8

Here it is the working version:

var demo = new Vue({
  el: '#demo',
  data: {
    checkedNames: []
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="demo">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

if you want to use a computed property you can use it this way:

var demo = new Vue({
  el: '#demo',
  data: {
    checkedNames: []
  },
  computed : {
    checkedComputed () {
      return this.checkedNames
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="demo">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked Names :</span>
  <span>{{ checkedComputed }}</span>
</div>

edited Aug 16, 2021 at 14:36

answered Feb 18, 2017 at 20:38

Soorena

4,4805 gold badges32 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dmitry Kurmanov Over a year ago

Thank you for your kind help, but I need to use exactly "checkedComputed" in v-model. I have restrictions which I described in the Update 1. Please check the update.

tony19 · Accepted Answer · 2022-07-15 20:49:36Z

6

Properties that start with _ or $ will not be proxied on the Vue instance because they may conflict with Vue’s internal properties and API methods. You will have to access them as vm.$data._property.

From the official documentation.

edited Jul 15, 2022 at 20:49

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 1, 2017 at 9:30

Guillaume Chau

762 bronze badges

Comments

Frezier Y · Accepted Answer · 2023-01-19 17:43:36Z

0

use this.data.propertyName see below


var demo = new Vue({
  el: '#demo',
  data: {
    checkedNames: []
  },
  computed : {
    checkedComputed () {
      return this.data.checkedNames
    }
  }
})

answered Jan 19, 2023 at 17:43

Frezier Y

11 bronze badge

Collectives™ on Stack Overflow

vuejs v-model, multiple checkbox and computed property

Update 1. Detail case explanation

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update 1. Detail case explanation

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related