Vue JS, checkboxes and computed properties

Question

I am having some problems using vue, checkboxes and computed properties.

I made a very small example showing my problem: https://jsfiddle.net/El_Matella/s2u8syb3/1/

Here is the HTML code:

<div id="general">
  Variable: 
  <input type="checkbox" v-model="variable">
  Computed:
  <input type="checkbox" v-model="computed()">
</div>

And the Vue code:

new Vue({
    el: '#general',
  data: {
    variable: true
  },
  compute: {
    computed: function() {
        return true;
    }
  }
})

The problem is, I can't make the v-model="computed" work, it seems that Vue doesn't allow such things.

So my question is, how could I use the benefits of the computed data and apply it to checkboxes?

Here is an other jsfiddle showing the same problem, but with more code, I was trying to use computed properties to build a "selected" products array variable: https://jsfiddle.net/El_Matella/s2u8syb3/

Thank you for your answers and have a nice day!

nils · Accepted Answer · 2016-01-13 11:44:59Z

7

Computed properties are basically JavaScript getters and setters, they are used like regular properties.

You can use a computed setter to set the value (currently, you only have a getter). You will need to have a data or props property in which you can save the changes of the model though, because getters and setters don't have an inherent state.

new Vue({
    el: '#general',
  data: {
    variable: true,
    cmpVariable: true,
  },
  computed: { // "computed" instead of "compute"
    cmp: {
      get: function() {
          return this.$data.cmpVariable;
      },
      set: function(val) {
          this.$data.cmpVariable = val;
      },
    }
  }
});

Also, you don't need to call the computed with brackets (as it behaves like a regular property):

<div id="general">
  Variable: 
  <input type="checkbox" v-model="variable">
  Computed:
  <input type="checkbox" v-model="cmp">
</div>

edited Jan 13, 2016 at 11:44

answered Jan 13, 2016 at 11:32

nils

27.4k6 gold badges73 silver badges82 bronze badges

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

1 Comment

JonTroncoso Over a year ago

I tried this, but the set() never fires when unchecking the checkbox.

Twiknight · Accepted Answer · 2016-01-13 13:56:18Z

You miss-spelled computed. Here Computed Properties
I guess you want to check an item in Product list, So it can be displayed in the selected list.

And you also want to check it off from both the lists.

Thus you don't need a computed property.

For check boxes, you can easily change the selected set by referring to it with v-model and set value for what you want to put in the set.

In your case, that's the product.id.

You may want to save the object itself in the selectedProducts list, but I highly recommend you not to do that. In some case, it will cause unexpected results as objects are mutable.

So it will work if it is written this way.

new Vue({
  el: '#general',
  data: {
    products: [{
      id: 1
    }, {
      id: 2
    }],
    selectedProducts: []
  }
})

<script src="//cdn.bootcss.com/vue/1.0.13/vue.min.js"></script>
<h1>Hello</h1>
<div id="general">
  <h2>Products</h2>
  <ul>
    <li v-for="product in products">
      <input v-model="selectedProducts" value="{{product.id}}" type="checkbox">{{ product.id }}
    </li>
  </ul>
  <h2>Selected Products</h2>
  <ul>
    <li v-for="p in selectedProducts">
      <input v-model="selectedProducts" value="{{p}}" type="checkbox">{{ p }}
    </li>
  </ul>
</div>

Collectives™ on Stack Overflow

Vue JS, checkboxes and computed properties

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related