一个js的问题

  • Z时代
  • 2024-02-24
  • 分类：IT

例如，我有一个 数组

comfortable: [
    { name: "维也纳", value: "97" ,fitlerTypeByOne:'hotel'},
    { name: "智选假日", value: "330",fitlerTypeByOne:'hotel' },
    { name: "锦江之星品尚", value: "39421" ,fitlerTypeByOne:'hotel'},
    { name: "全季", value: "29323" ,fitlerTypeByOne:'hotel'},
    { name: "时光漫步", value: "39494" ,fitlerTypeByOne:'hotel'}
  ],

还有一个空数组 array:[]

点击事件的时候里面的数据可能会增加一项或者减少一项，怎么将comfortable最新的数据对象放入array?

换成使用场景来说就是这里有一个多选子组件，每次多选和反选都会筛出最新的comfortable,但是VUE中要传入父组件的时候每次都要通过事件$emit来触发，array数组每次都要吧最新的comfortable里面的对象push进去，如何进行js操作?

一个js的问题

回答：

watch:{

comfortable(val){          
      this.array=[];
      val.forEach(item=>{
          this.array.push({
              name:item.name,
            value:item.value,
            fitlerTypeByOne:item.fitlerTypeByOne                    
          });    
      })
    this.$emit('array', this.array);
}

},

回答：

如果你的子组件已经处理了checkbox的状态的监听，那么你子组件直接使用 watch 监听选中的数据集，在参数变更 进行 emit 的的触发，在父元素界面通过 @ 你的 emit名称 就可以拿到参数。
如果子组件没处理 checkbox 的监听状态（或者说你问的就是怎么去监听checkbox），正常情况下你的这些左侧列表或者 checkbox 本身应该是遍历写出来的，以element-ui为例：

<template>
  <el-checkbox-group v-model="checkArry">
    <template v-for="item,index in comfortable">
      <el-checkbox :label="item.value">{{item.name}}</el-checkbox>
    </template>
  </el-checkbox-group>
</template>
export default {
    data: {
        checkArry: []
    },
    watch: {
        checkArry(now, old){
            this.$emit("currentCheckBox", now);
        }
    }
}

大概处理就是这样，配合左侧的多维度操作可以配合 vue 的状态管理，或者 EventBus 进行配合处理

以上是 一个js的问题 的全部内容， 来源链接： utcz.com/p/936749.html

回到顶部