如何制作可选项目

【问题标题】：How to make selectable items如何制作可选项目
【发布时间】：2020-10-13 08:19:39
【问题描述】：

每当我单击按钮时，我都希望 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;
    },

【问题讨论】：

项目已定义？至少不在你的剪辑中

标签： vue.js vuejs2 pug

【解决方案1】：

如果它是一种状态（例如，当您选择时无法将其切换回），则只需删除 item 参数并像这样转换方法

chooseBreakfast() {
  this.itemSelected = true
}

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

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

同时从 @click 处理程序中删除这两种情况下的项目参数

【讨论】：