标签：Vue taste activeLabel scene js axios 电商 data 属性

 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。