无法像不喜欢 Vue 2 组件一样撤消

Question

喜欢不喜欢组件

• 我在使其按预期工作时遇到一些困难，完全需要一些帮助
• 要求
  • 当没有选择任何内容并且我点击“喜欢”时，它应该选择“喜欢”组件
  • 当选择不喜欢并且我点击喜欢时，它应该选择“喜欢”组件
  • 当已经选择“喜欢”并且我点击“喜欢”时，应该取消选择“喜欢”组件
• 上述第三个要求目前对我来说不起作用
• 这是代码沙箱的链接，这是组件代码

我正在使用 nuxt 2，fontawesome 图标和 buefy（如果有帮助的话）

<template lang="pug">
section
  b-field
    b-radio-button(
      v-model="radioButton",
      @click.native="unselect",
      native-value="like",
      type="is-success is-light is-outlined",
      size="is-small"
    )
      b-icon(icon="thumbs-up")
      span Like
    b-radio-button(
      v-model="radioButton",
      @click.native="unselect",
      native-value="dislike",
      type="is-danger is-light is-outlined",
      size="is-small"
    )
      b-icon(icon="thumbs-down")
      span Dislike
</template>

<script>
export default {
  data() {
    return {
      radioButton: "",
    };
  },
  methods: {
    unselect(event) {
      this.$nextTick(() => {
        const label = event.target?.innerText?.toLowerCase();
        console.log(this.radioButton, label);
        if (this.radioButton === label) {
          this.radioButton = "";
        }
      });
    },
  },
};
</script>

• 如果更有经验的人可以告诉我哪里出了问题，我将非常感激

Answer 1

取消选择功能未按预期工作，因为在更新

@click.native

之前触发

v-model

事件。因此，当您单击已选择的“喜欢”组件时，

this.radioButton

仍然是之前的值，而不是“喜欢”。

您可以通过使用更新的生命周期挂钩而不是

@click.native

事件来解决此问题。

updated

钩子在组件数据更改后调用，因此它会在

v-model

更新后调用。

<template lang="pug">
section
  b-field
    b-radio-button(
      v-model="radioButton",
      native-value="like",
      type="is-success is-light is-outlined",
      size="is-small"
    )
      b-icon(icon="thumbs-up")
      span Like
    b-radio-button(
      v-model="radioButton",
      native-value="dislike",
      type="is-danger is-light is-outlined",
      size="is-small"
    )
      b-icon(icon="thumbs-down")
      span Dislike
</template>

<script>
export default {
  data() {
    return {
      radioButton: "",
      previousButton: ""
    };
  },
  updated() {
    if (this.radioButton === this.previousButton) {
      this.radioButton = "";
    }
    this.previousButton = this.radioButton;
  }
};
</script>

我们将所选按钮的先前值存储在

previousButton

中。在

updated

钩子中，我们将

radioButton

的当前值与

previousButton

进行比较。如果它们相同，则意味着用户单击了已经选择的组件，因此我们通过将

radioButton

设置为空字符串来取消选择它。之后，我们用

previousButton

的当前值更新

radioButton

以供将来比较。