如何选择项目

问题描述

每当我单击按钮时，我都希望div向其添加selected-class。我在做什么错了？

template
          .d-flex.align-items-center.mt-2(
            :class="{ 'selected-class': itemSelected }",)
            p.mb-0.meal-plan Chicken Meal 
            b-button.breakfast-button.ml-auto(
              href="#",variant="primary",@click="chooseBreakfast(item)"
            ) Choose

data() {
    return {
      itemSelected: false,};
  },methods: {
    chooseBreakfast(item) {
      this.itemSelected = item;
    },

解决方法

如果它处于一种状态（例如，当您选择时无法将其切换回原来的状态），则只需删除item参数并转换该方法即可

chooseBreakfast() {
  this.itemSelected = true
}

如果您需要切换状态，请再次删除item参数，然后像这样转换方法

chooseBreakfast() {
  this.itemSelected = !this.itemSelected
}

在两种情况下也都从@click处理程序中删除项目参数