CODEWITHSUNDEEP
javascriptvue.js
Hammerbot
Hammerbot

Reputation: 16354

Vue JS, checkboxes and computed properties

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!

Upvotes: 3

Views: 10641

Answers (2)

Twiknight
Twiknight

Reputation: 39

  1. You miss-spelled computed. Here Computed Properties

  2. 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>

Upvotes: 1

nils
nils

Reputation: 27214

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>

Upvotes: 7

Related Questions