Vue 电商项目多条件筛选功能 (上——vue及store.js部分)

 HTML：标签inner1为条件1——场景，标签inner2为条件2——口味

<div class="inner">
        <div class="inner1">
          <label>场景：</label>
          <span
            @click="addLabel('scene', '生日')"
            :class="activeLabel.scene == '生日' ? 'active' : ''"
            >生日</span
          >
          <span
            @click="addLabel('scene', '聚会')"
            :class="activeLabel.scene == '聚会' ? 'active' : ''"
            >聚会</span
          >
          <span
            @click="addLabel('scene', '情侣')"
            :class="activeLabel.scene == '情侣' ? 'active' : ''"
            >情侣</span
          >
        </div>
        <div class="inner2">
          <label>口味：</label>
          <span
            @click="addLabel('taste', '拿破仑')"
            :class="activeLabel.taste == '拿破仑' ? 'active' : ''"
            >拿破仑</span
          >
          <span
            @click="addLabel('taste', '奶油')"
            :class="activeLabel.taste == '奶油' ? 'active' : ''"
            >奶油</span
          >
          <span
            @click="addLabel('taste', '慕斯')"
            :class="activeLabel.taste == '慕斯' ? 'active' : ''"
            >慕斯</span
          >
        </div>
      </div>
</div>

Vue:

data() {
    return {
      //为两种条件创建一个名为activeLabel的对象，一开始让scene和taste的属性值为空
      activeLabel: {
        scene: "",
        taste: "",
      },
    };
  },
  methods: {
    addLabel(type, value) {
      //当某选项被点击，会接收到activeLabel的属性为scene或是taste,并给属性赋值
      this.activeLabel[type] = value;
      //每一次点击时,两个属性值会被更新覆盖,未被更新的属性值也不会被清空
      let newScene = this.activeLabel.scene;
      let newTaste = this.activeLabel.taste;
      this.$store.dispatch("newCake", {
        scene: newScene,
        taste: newTaste,
      });
    },
  },

store>index.js:

import axios from 'axios'
let host = 'http://localhost:8888/'

export default new Vuex.Store({
state: {
    cakeArr: []
  },
mutations: {
    NEWCAKE(state, data) {
      state.cakeArr = data
    }

  },
actions: {
    newCake(context, obj) {
//去node.js接收参数进行逻辑操作，详情见(下)
      axios.get(host + "newCake.do", { params: { scene: `${obj.scene}`, t_name: `${obj.taste}` } }).then((resp) => {
        context.commit('NEWCAKE', resp.data)
      });
    }
  }
modules: {
  }
})

标签：Vue,taste,activeLabel,scene,js,axios,电商,data,属性
来源： https://blog.csdn.net/weixin_60463255/article/details/120739323