如何在Vue js中绑定带有芯片的复选框（双向绑定）

Posted 2021-04-06

我是Vue Js的新手。问题在于从表单中选择一个下拉列表，选项以div中的复选框形式出现，选中复选框时，芯片应显示复选框标签。但此处复选框自动被选中并且芯片显示，但选择后一个复选框芯片应该显示，关闭芯片复选框应该得到Deselect.This是预期但不会发生。这是我的代码。亲切的帮助。

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

嗨我编辑了代码并添加了来自created（）的函数调用

答案

我想你想做这样的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值都是布尔值。

另一答案

我只是简化了你的codepen来展示如何做到这一点：

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

克里斯，乔治

另一答案

我最后一次尝试了解你的用例并向你展示一个非常简化的版本，没有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}
        ];
      }
    }
  } 
});