Как связать чекбоксы с чипами в Vue js (двухстороннее связывание)

Question

Я новичок в Vue Js.Проблема заключается в выборе выпадающего меню из формы, опции появляются в виде флажка в div, при выборе флажка, чипы должны отображаться с меткой флажка. Но здесь флажок автоматически выбирается, и чипы отображаются, но после выборафлажок чипов должен отображаться и при закрытии чипов флажок должен получить Отменить выбор. Это ожидается, но не происходит. Вот мой код. Пожалуйста, помогите.

   <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')
        }    
      }
    }

Привет! Я отредактировал код и добавил функциюзвонок от созданного ()

Answer 1

Полагаю, вы хотите сделать это 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,
    }
  }
})

Я добавил атрибут selected, потому что по умолчанию v-checkbox и значение v-chip имеют логическое значение.

Answer 2

Я в последний раз пытался понять ваш сценарий использования и показать вам в очень упрощенной версии без vuetify и axios, как добиться того, чего, я думаю, вы хотите достичь.

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

Answer 3

Я просто упростил ваш кодовый блок, чтобы показать, как это сделать:

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

Для вас флажки всегда установлены, потому что ваша v-модель привязана к chip.text. Я добавил выбранное свойство к фишкам, чтобы вы могли связать их с chip.selected.

Надеюсь, это поможет!

Также совет от меня, руководства от vue.js очень полезны и действительно хорошо документированы, пожалуйста, ознакомьтесь с ними:

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

кр, Georg