[Vuejs]-Show button according to v-if condition in vue.js

by

0👍

✅

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 == ''"

0👍

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

Leave a comment