如何在 Vue js 中将 Checkboxes 与 Chips 绑定(双向绑定) [英] How to bind Checkboxes with Chips in Vue js(Two way Binding)

问题描述

我是 Vue Js 的新手.问题在于从表单中选择一个下拉列表，选项以 div 中的复选框形式出现，在选择复选框时，芯片应显示复选框标签.应该显示一个复选框芯片，关闭芯片复选框应该取消选择.这是预期的，但不会发生.这是我的代码.请帮忙.

 <模板><div id="应用程序"><v-layout row wrap><v-flex v-for="芯片中的芯片" xs12 sm4 md4><v-checkbox :label="chip.name" v-model="chip.text"></v-checkbox>//复选框不起作用</v-flex><div class="text-xs-center"><v-选择:items="dataArr"v-model="sensorDM"标签=选择"class="input-group--focused"项目值=文本"v-change="呼叫(sensorDM)"></v-select><v-芯片v-for="芯片标签":key="tag.id"v-model="tag.text"关闭>{{ 标签名称 }}</v-chip><br>

</模板><脚本>从 'axios' 导入 axios导出默认{name: '创造',数据:() =>({筹码:[{id:1，文本:'设备 1'，名称:'设备 1'}, {id:2，文本:'设备 2'，名称:'设备 2'}],芯片1:假，芯片2:真实，数据输入:[]}),创建(){让自己=这个axios.get('http://localhost:4000/api/devices').then(功能(响应){self.fData(response.data.result)})},方法: {fData:函数(消息){让自己=这个message.forEach(function (el, i) {self.dataArr.push(el.sDM.name)})},打电话(我){让自己=这个axios.get('http://localhost:4000/api/part1/Models/' + mes).then(功能(资源){self.resObj = res.data.responseself.resObj.forEach(function (el, i) {el['text'] = el.nameel['isOpen'] = '假'})self.chips = self.resObj})},提交(){控制台('hjkh')}}}

我已经编辑了代码并添加了来自 created() 的函数调用

解决方案

我猜你想这样做 https://codepen.io/ittus/pen/VxGjgN

<v-flex v-for="芯片中的芯片" :key="chip.id" xs12 sm4 md4><v-checkbox :label="chip.name" v-model="chip.selected"></v-checkbox><v-芯片v-model="chip.selected"关闭>{{ 芯片名称 }}</v-chip></v-flex><div class="text-xs-center">

新的 Vue({el: '#app',数据() {返回 {筹码:[{id: 1, text: 'Device 1', name: 'Device 1', selected: false}, {id: 2, text: 'Device2', name: 'Device 2', selected: false}],芯片1:假，芯片2:真实，}}})

我添加了 selected 属性，因为默认情况下 v-checkbox 和 v-chip 值是布尔值.

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()

解决方案

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.

这篇关于如何在 Vue js 中将 Checkboxes 与 Chips 绑定(双向绑定)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！