Vue.js中如何通过v-if条件正确切换显示Create Phase与Edit Phase按钮

• 初始代码核心错误：data中初始化的phaseData是数组类型，你直接用phaseData.phase_name取属性，数组本身没有phase_name属性，所以这个判断条件永远为false，直接走v-else逻辑展示Edit Phase按钮。
• 后续修改的代码错误：
  1. 你用v-for遍历phaseData，如果接口返回的phaseData是空数组，整个遍历块不会渲染，两个按钮都会消失。
  2. 遍历的每一项data本身是单条phase对象，不是数组，你写data[0].phase_name取到的是undefined，判断条件还是永远为false，依旧只展示Edit Phase按钮。

首先明确业务逻辑：当前项目没有phase数据，或者phase的phase_name为空时展示Create Phase按钮，否则展示Edit Phase按钮。

情况1：单个项目最多对应1条phase数据（无需遍历） #

直接调整判断逻辑即可：

<template>
  <td class="text-center">
    <button
      v-if="!phaseData.length || (phaseData[0] && !phaseData[0].phase_name)"
      class="btn btn-primary"
    >
      Create Phase
    </button>
    <button v-else class="btn btn-primary">
      Edit Phase
    </button>
  </td>
</template>

同时注意Script部分的隐患：你导入的axios如果没有挂载到Vue原型上，不能用this.axios调用，直接用导入的axios即可：

// editProject方法内修改axios调用方式
axios.get("http://45.114.85.18:8099/api/project/phase?project_id=" + id, {
  headers: {
    Authorization: "Bearer " + localStorage.getItem("access_token"),
  },
}).then((res) => {
  this.phaseData = res.data.data;
  this.showPhase = res.data.data[0] ?? "";
});

情况2：单个项目对应多条phase数据（需要遍历） #

调整遍历内的判断逻辑，同时补充空数组时的创建按钮：

<template>
  <td class="text-center">
    <div v-for="(item, index) in phaseData" :key="index">
      <button
        v-if="!item.phase_name"
        class="btn btn-primary"
      >
        Create Phase
      </button>
      <button v-else class="btn btn-primary">
        Edit Phase
      </button>
    </div>
    <!-- phase数据为空时显示全局创建按钮 -->
    <button v-if="!phaseData.length" class="btn btn-primary">Create Phase</button>
  </td>
</template>

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