VueJS中如何根据API响应设置一对按钮的默认值？

先给你指出现有代码里的几个明显问题，这些可能是导致你功能异常的原因：

• role 属性语法错误：应该写成 role="button"，不要多余的 your text 内容
• 方法名不一致：一个按钮绑定的是 setMandatory，另一个是 setisMandatory，大小写不统一会导致点击无效
• 按钮文本的双引号是多余的：直接写 No 和 Yes 即可，不需要用双引号包裹

你的需求是页面加载时根据API返回结果设置一次按钮状态，不需要用 v-if（v-if 是用来控制元素显示/隐藏的，这里两个按钮都要保留，只是切换样式状态），正确的实现方式如下：

完整代码示例 #

<template>
  <div class="small-7 column btn-switch">
    <span class="switch-statement">Is it mandatory</span>
    <!-- 切换"No"按钮的样式 -->
    <button
      :class="!isMandatory ? 'button--secondary' : 'button--tertiary'"
      class="button button-border"
      @click="setMandatory(false)"
    >
      No
    </button>
    <!-- 切换"Yes"按钮的样式 -->
    <button
      :class="isMandatory ? 'button--secondary' : 'button--tertiary'"
      class="button"
      role="button"
      @click="setMandatory(true)"
    >
      Yes
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始化状态，等待API返回后赋值
      isMandatory: null
    };
  },
  mounted() {
    // 页面加载时调用API，仅执行一次
    this.fetchMandatoryStatus();
  },
  methods: {
    async fetchMandatoryStatus() {
      try {
        // 替换成你的API请求逻辑
        const response = await fetch('/api/get-mandatory-status');
        const data = await response.json();
        // 根据API返回结果设置状态
        this.isMandatory = data.isMandatory;
      } catch (error) {
        console.error('获取状态失败:', error);
        // 异常情况下可以设置默认值
        this.isMandatory = false;
      }
    },
    setMandatory(status) {
      // 这里可以添加点击后的逻辑，比如调用API更新状态（如果需要）
      this.isMandatory = status;
    }
  }
};
</script>

关键说明 #

1. 初始化状态：在 data 里定义 isMandatory 初始值为 null，确保API返回前不会有错误的样式渲染
2. 页面加载时获取状态：在 mounted 钩子中调用API，这个钩子只会在页面首次加载时执行一次，符合你的需求
3. 动态样式绑定：通过 :class 根据 isMandatory 的值切换按钮的激活样式，不需要隐藏/显示按钮
4. 统一方法名：两个按钮都调用 setMandatory 方法，传入不同的状态值，保证逻辑一致性

内容的提问来源于stack exchange，提问作者ajith sadanandan