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-flexv-for="chip in chips":key="chip.id"xs12sm4md4><v-checkbox:label="chip.name"v-model="chip.selected"></v-checkbox><v-chipv-model="chip.selected"close>
         {{ chip.name }}
      </v-chip></v-flex><divclass="text-xs-center"></div>
</div>

newVue({
  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:

<divid="app"><divv-for="chip of chips":key="chip.id"xs12sm4md4><inputtype="checkbox"v-model="chip.selected"><labelfor="checkbox">{{ chip.name }}</label></div></div>

JS:

newVue({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:

<divid="app"><divid="v-layout"rowwrap><divclass="text-xs-center"><selectv-model="selectedDevice"
              @change="getChips(selectedDevice)"><optionv-for="device of devices":key="device.id">
                {{device.name}}
            </option></select><br></div><divid="v-flex"v-for="chip in chips"xs12sm4md4><inputid="v-checkbox"type="checkbox"v-model="chip.selected"
            ><labelfor="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}
        ];
      }
    }
  } 
});