How To Bind Checkboxes With Chips In Vue Js(Two Way Binding)

Im a newbie in Vue Js. The problem is on selecting an dropdown from form,options are coming in form of checkbox in a div,on selecting of checkbox, chips should display with the che

Solution 1:

I guess you want to do like this https://codepen.io/ittus/pen/VxGjgN

<div id="app">
   <v-flex v-for="chip in chips" :key="chip.id" xs12 sm4 md4>
      <v-checkbox :label="chip.name" v-model="chip.selected"></v-checkbox>
      <v-chip
         v-model="chip.selected"
         close>
         {{ chip.name }}
      </v-chip>
   </v-flex>
   <div class="text-xs-center">
   </div>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      chips: [{
      id: 1, text: 'Device 1', name: 'Device 1', selected: false
    }, {
      id: 2, text: 'Device2', name: 'Device 2', selected: false
    }],
    chip1: false,
    chip2: true,
    }
  }
})

I added selected attribute, because by default v-checkbox and v-chip value are boolean.

Solution 2:

I just super simplified your codepen to show how to do this:

https://codepen.io/anon/pen/qYMNxy?editors=1010

HTML:

<div id="app">
   <div v-for="chip of chips" :key="chip.id" xs12 sm4 md4>
     <input type="checkbox" v-model="chip.selected">
     <label for="checkbox">{{ chip.name }}</label>
  </div>
</div>

JS:

new Vue({
  el: '#app',
  data: () => ({
   chips: [
     { id: 1, text: 'Device 1', name: 'Device 1', selected: false},
     { id: 2, text: 'Device2', name: 'Device 2', selected: true}
   ]
  })
});

For you the checkboxes are always selected because your v-model is bound to the chip.text. I added a selected property to the chips so that you can bind to chip.selected.

I hope this helps!

Also a tip from my side, the guides from vue.js are super helpful and really nicely documented, please check them out:

https://vuejs.org/v2/guide/forms.html

kr, Georg

Solution 3:

I tried one last time to understand your usecase and to show you in a very simplified version without vuetify and axios how to achieve what I think you want to achieve.

https://codepen.io/anon/pen/LmJoYV?editors=1010

HTML:

<div id="app">
    <div id="v-layout" row wrap>
       <div class="text-xs-center">
          <select
              v-model="selectedDevice"
              @change="getChips(selectedDevice)">

            <option 
                v-for="device of devices"
                :key="device.id">
                {{device.name}}
            </option>
          </select>
        <br>
       </div>

       <div id="v-flex"
            v-for="chip in chips" xs12 sm4 md4>

            <input id="v-checkbox" 
                   type="checkbox"
                   v-model="chip.selected"
            >
            <label for="v-checkbox">{{ chip.name }}</label>
        </div>
  </div>
</div>

JS:

new Vue({
  el: '#app',
  data: () => ({
   devices: [],
   chips: [],
   selectedDevice: {}
  }),
  created () {
    // faked calling axios to get the devices and returned 2 hardcoded devices
    // axios.get('http://localhost:4000/api/devices')
    this.devices =  [
     { id: 1, text: 'Device 1 text', name: 'Device 1'},
     { id: 2, text: 'Device2 text', name: 'Device 2'}
    ];
  },
  methods: {
    getChips (device) {

      console.log(device);
      // faked calling axios to get whatever you wanna get here
      // axios.get('http://localhost:4000/api/part1/Models/' + mes)

      // Please ignore the if and else that is just there because
      // I am faking the axios calls that you would do!!
      if(device === 'Device 1') {
        this.chips =  [
          { id:1, name:"Chip_WH", selected: true}, 
          { id:2, name:"Chip_EH", selected: false}
        ];
      }
      else {
        this.chips = [
          { id:1, name:"Chip_BL", selected: false}, 
          { id:2, name:"Chip_CK", selected: true}
        ];
      }
    }
  } 
});