show button according to v-if condition in vue.js-CodePudding

I have two buttons in a page. One is Create phase and the other is Edit Phase. I want to hide one button when the other button is available at same place. I have written my code like below:

<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];
        });
    },
}

But only the edit phase button is showing. The create phase button is not showing according to the condition. The backend is using node.js.

Updates:

<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>

CodePudding user response：

Id data

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

In template check if value exist phaseData

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

rest code as it is.

Also check your conditions when to set phaseData

CodePudding user response：

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 is array , so you can try v-if="phaseData[0].phase_name == ''" or you can check v-if="showPhase.phase_name == ''"