vue 实现选择品牌

实现品牌选择功能

在Vue中实现品牌选择功能可以通过下拉框、单选按钮组或自定义组件完成。以下是几种常见的实现方式：

下拉选择框实现

使用<select>和v-model绑定数据：

<template>
  <select v-model="selectedBrand">
    <option v-for="brand in brands" :value="brand.id" :key="brand.id">
      {{ brand.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedBrand: '',
      brands: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Samsung' },
        { id: 3, name: 'Huawei' }
      ]
    }
  }
}
</script>

单选按钮组实现

适合品牌数量较少的情况：

<template>
  <div v-for="brand in brands" :key="brand.id">
    <input 
      type="radio" 
      :id="'brand-'+brand.id" 
      :value="brand.id" 
      v-model="selectedBrand"
    >
    <label :for="'brand-'+brand.id">{{ brand.name }}</label>
  </div>
</template>

自定义选择组件

创建可复用的品牌选择组件：

<!-- BrandSelector.vue -->
<template>
  <div class="brand-selector">
    <div 
      v-for="brand in brands" 
      :key="brand.id"
      @click="selectBrand(brand)"
      :class="{ 'active': selectedBrand.id === brand.id }"
    >
      {{ brand.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    brands: Array,
    value: Object
  },
  data() {
    return {
      selectedBrand: this.value
    }
  },
  methods: {
    selectBrand(brand) {
      this.selectedBrand = brand
      this.$emit('input', brand)
    }
  }
}
</script>

带搜索的品牌选择

对于品牌数量较多的情况，可以添加搜索功能：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索品牌">
    <select v-model="selectedBrand" multiple>
      <option 
        v-for="brand in filteredBrands" 
        :value="brand.id" 
        :key="brand.id"
      >
        {{ brand.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      selectedBrand: [],
      brands: [/* 品牌数据 */]
    }
  },
  computed: {
    filteredBrands() {
      return this.brands.filter(brand => 
        brand.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

品牌选择与表单提交

将品牌选择集成到表单中：

<template>
  <form @submit.prevent="submitForm">
    <label>选择品牌：</label>
    <select v-model="formData.brandId" required>
      <option value="">请选择</option>
      <option 
        v-for="brand in brands" 
        :value="brand.id" 
        :key="brand.id"
      >
        {{ brand.name }}
      </option>
    </select>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        brandId: ''
      },
      brands: [/* 品牌数据 */]
    }
  },
  methods: {
    submitForm() {
      // 处理表单提交逻辑
    }
  }
}
</script>

品牌选择与Vuex集成

当需要全局管理品牌选择状态时：

// store.js
export default new Vuex.Store({
  state: {
    selectedBrand: null,
    brands: [/* 品牌数据 */]
  },
  mutations: {
    setSelectedBrand(state, brand) {
      state.selectedBrand = brand
    }
  }
})

<!-- 组件中使用 -->
<template>
  <select v-model="selectedBrand" @change="updateBrand">
    <option 
      v-for="brand in brands" 
      :value="brand" 
      :key="brand.id"
    >
      {{ brand.name }}
    </option>
  </select>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['brands']),
    selectedBrand: {
      get() {
        return this.$store.state.selectedBrand
      },
      set(value) {
        this.setSelectedBrand(value)
      }
    }
  },
  methods: {
    ...mapMutations(['setSelectedBrand'])
  }
}
</script>

以上实现方式可根据具体需求进行调整和组合，满足不同场景下的品牌选择功能需求。