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

I made a very small example showing my problem: /

Here is the HTML code:

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

And the Vue code:

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

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

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

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

Thank you for your answers and have a nice day!

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

I made a very small example showing my problem: https://jsfiddle/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="puted()">
</div>

And the Vue code:

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

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

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

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

Thank you for your answers and have a nice day!

• javascript
• vue.js

2 Answers 2

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

You can use a puted 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,
  },
  puted: { // "puted" instead of "pute"
    cmp: {
      get: function() {
          return this.$data.cmpVariable;
      },
      set: function(val) {
          this.$data.cmpVariable = val;
      },
    }
  }
});

Also, you don't need to call the puted 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>

1. You miss-spelled puted. 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 puted 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 remend 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./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>