根据vue.js中的v-if条件显示按钮

Question

一个页面中有两个按钮。一个是创建阶段另一个是Edit Phase．当另一个按钮在同一位置可用时，我想隐藏一个按钮。我写的代码如下:

<template>
<button
v-if="phaseData.phase_name == ''"
class="btn btn-primary"
>
Create Phase
</button>
<button v-else>Edit Phase</button>
</template>
<script>
import pagination from "../common/Pagination";
import Multiselect from "vue-multiselect";
import axios from "axios";
export default {
components: {
pagination,
Multiselect,
},
data() {
return {
phaseData: [],
showPhase: "",
};
},
methods:{
editProject: function (id) {
//const_this = this;
this.showPhaseModal = true;
this.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];
});
},
}

但是只有编辑阶段按钮正在显示。创建阶段根据条件，按钮未显示。后端使用node.js。

更新:

<td class="text-center">
<div v-for="(data, index) in phaseData" :key="index">
<button
v-if="data[0].phase_name == ''"
class="btn btn-primary"
>
Create Phase
</button>
<button v-else>Edit Phase</button>
</div>

Answer 1

new Vue({
el: '#demo',
data() {
return {
phaseData: [{phase_name: 'aaa'}, {phase_name: ''}, {phase_name: 'bbb'}]
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<table>
<tr v-for="(data, index) in phaseData" :key="index">
<td class="text-center" >
<p>{{data.phase_name}}</p>
<div>
<button
v-if="!data.phase_name"
class="btn btn-primary"
>
Create Phase
</button>
<button v-else>Edit Phase</button>
</div>
</td>
</tr>
</table>
</div>

this.phaseData是数组，所以你可以试试v-if="phaseData[0].phase_name == ''"或者你可以试试v-if="showPhase.phase_name == ''"

Answer 2

Id data

data() {
return {
phaseData: null, // no value
showPhase: "",
};
},

模板中检查值是否存在phaseData

<template>
<button v-if="phaseData" class="btn btn-primary">Create Phase</button>
<button v-else>Edit Phase</button>
</template>

保留代码。

设置phaseData时也要检查您的条件