How to bind Checkboxes with Chips in Vue js(Two wa

Question

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 checkbox label.But here checkbox is automatically getting selected and chips are getting displayed,But after selecting an checkbox chips should display and on closing the chips checkbox should get Deselect.This is expected but not happening.Here is the my code.Kindly help.

   <template>
    <div id="app">
     <v-layout row wrap>
         <v-flex v-for="chip in chips" xs12 sm4 md4>
          <v-checkbox   :label="chip.name" v-model="chip.text"></v-checkbox>
          //  checkbox not working
          </v-flex>
        <div class="text-xs-center">
       <v-select
       :items="dataArr"
        v-model="sensorDM"
       label="Select"
      class="input-group--focused"
     item-value="text"
     v-change="call(sensorDM)"
       ></v-select>
       <v-chip
          v-for="tag in chips"
          :key="tag.id"
          v-model="tag.text"
          close
        >
        {{ tag.name }}
        </v-chip> 
        <br>
        </div>
      </div>
    </template>
    <script>
    import axios from 'axios'
    export default {
      name: 'Creation',
      data: () => ({
       chips: [{
          id: 1, text: 'Device 1', name: 'Device 1'
        }, {
          id: 2, text: 'Device2', name: 'Device 2'
        }],
        chip1: false,
        chip2: true,
        dataArr: []
      }),
      created () {
        let self = this
        axios.get('http://localhost:4000/api/devices')
    .then(function (response) {
     self.fData(response.data.result)
    })
      },
      methods: {
      fData: function (message) {
      let self = this  
      message.forEach(function (el, i) {
        self.dataArr.push(el.sDM.name)
      })
    },
        call (mes) {
          let self = this
          axios.get('http://localhost:4000/api/part1/Models/' + mes)
    .then(function (res) {
      self.resObj = res.data.response
      self.resObj.forEach(function (el, i) {
        el['text'] = el.name
        el['isOpen'] = 'false'
      })
      self.chips = self.resObj
    })
        },
        submit(){
             console('hjkh')
        }    
      }
    }

Hi I have edited the code and added the function call from created()

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

Answer 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

Answer 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}
        ];
      }
    }
  } 
});