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>

```