Vue3 无法获得仅适用于特定按钮的动态样式答案

【问题标题】：Vue3 can't get dynamic styling to only apply to specific buttonsVue3 无法获得仅适用于特定按钮的动态样式
【发布时间】：2022-11-13 02:42:06
【问题描述】：

我正在学习vue，我很困惑如何让这些按钮在单击时分别动态设置样式。这些是产品列表的过滤器，我希望在过滤器“打开”时应用一种样式，而在过滤器“关闭”时应用不同样式。我可以让样式动态更新，但是当单击其中任何一个按钮时，所有按钮都会更改样式。实际的过滤器功能按预期工作（单击该产品的按钮时将过滤掉该产品）。

在代码 sn-p 中，模式被传递给 BaseButton 组件，然后作为类应用。

`    <template>
    <ul>
        <li v-for="genus of genusList" :key="genus.label">
            <BaseButton @click="filterGenus(genus.label)"  :mode="genusClicked.clicked ? 'outline' :''">
                {{ genus.label }}
            </BaseButton>
        </li>
        <BaseButton @click="clearFilter()" mode="flat">Clear Filter</BaseButton>
    </ul>
    </template>



    methods: {
        filterGenus(selectedGenus) {
            this.clickedGenus = selectedGenus
            this.clicked = !this.clicked
            this.$emit('filter-genus', selectedGenus)
        },
        clearFilter() {
            this.$emit('clear-filter')
        }
    },`

我尝试制作一个计算值以将 .clicked 值添加到 genusList 对象，但这似乎没有帮助。

【问题讨论】：

模板和方法在同一个地方，还是父/子？请在此处为您的问题付出更多努力。另外，您的示例中如何使用off/on？尝试过一个对象？

标签： vue.js vue-component styling

【解决方案1】：

可能类似于以下 sn-p：

const app = Vue.createApp({
  data() {
    return {
      genusList: [{label: 1}, {label: 2}, {label: 3}],
      selGenus: null,
    };
  },
  methods: {
    filterGenus(selectedGenus) {
      this.selGenus = this.selGenus !== selectedGenus ? selectedGenus : null
      this.$emit('filter-genus', selectedGenus)
    },
    clearFilter() {
      this.selGenus = null
      this.$emit('clear-filter')
    }
  },
})
app.component('baseButton', {
  template: `<button :class="mode"><slot /></button>`,
  props: ['mode']
})
app.mount('#demo')

.outline {
  border: 2px solid red;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <ul>
    <li v-for="genus of genusList" :key="genus.label">
      <base-button @click="filterGenus(genus.label)"  :mode="genus.label === selGenus ? 'outline' :''">
          {{ genus.label }}
      </base-button>
    </li>
    <base-button @click="clearFilter()" mode="flat">Clear Filter</base-button>
  </ul>
</div>

【讨论】：