iview单选框通过数据的name属性实现数据的筛查代码,并且相同name的按钮只显示一个

奋斗者格洛古

已于 2023-07-04 12:51:09 修改

阅读量187

点赞数

文章标签： javascript 前端

于 2023-06-30 14:49:55 首次发布

本文链接：https://blog.csdn.net/m0_57005111/article/details/131476568

版权

该文章介绍了一种使用Vue.js中的RadioGroup组件和v-model指令来绑定单选按钮选中的值。通过computed属性处理uniqueItems和filteredItems，实现对重复数据的去重和根据选中值筛选显示列表的功能。Radio组件的label属性绑定item.name，v-for循环遍历数据，同时使用Set数据结构进行去重。

摘要由CSDN通过智能技术生成

解决方案：首先在模板中使用RadioGroup组件来包裹多个Radio组件,并使用v-model指令来绑定selectedValue属性。selectedValue属性用于存储选中的单选框的值。然后,在v-for指令中使用:label属性来绑定单选框的值,将item.name作为单选框的值。这样,选中单选框时,selectedValue属性的值就会变为选中的item.name。在computed属性中定义了一个uniqueItems计算属性,用于获取去重后的items数组。通过使用Set数据结构来去重,并使用Array.from方法将Set转换为数组。在filteredItems计算属性中,根据选中的值筛查数据。最后,在模板中使用v-for指令循环渲染filteredItems数组中的每一项,并使用:key属性来指定每一项的唯一标识。这样，选中单选框的值时,会根据选中的值来筛查数据,并显示筛查后的结果。相同的name只会显示一次按钮。

<template>
  <div>
    <RadioGroup v-model="selectedValue">
      <Radio :label="item.name" v-for="item in uniqueItems" :key="item.id">
        {{ item.name }}
      </Radio>
    </RadioGroup>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 1' },
        { id: 5, name: 'Item 2' },
        { id: 6, name: 'Item 3' }
      ]
    }
  },
  computed: {
    uniqueItems() {
      const uniqueSet = new Set(this.items.map(item => item.name))
      return Array.from(uniqueSet).map(name => {
        return this.items.find(item => item.name === name)
      })
    },
    filteredItems() {
      if (this.selectedValue === '') {
        return this.items
      } else {
        return this.items.filter(item => item.name === this.selectedValue)
      }
    }
  },
  methods: {
    handleRadioChange(value) {
      this.selectedValue = value
    }
  }
}
</script>