How can change href name based on v-if in vue-CodePudding

At this time it show add alert on my form after add the alert it still show same link add alert i want to show add another alert after add the first but i don't know how can i do this

<template>

  <div class="not-as-small form-text mb-1">
  <a
    href="#"
    data-tc-add-alert-date-btn
    @click.prevent="addAlert"
    class="text-cyan"
  >&plus; Add Alert</a>
 </div>
<template>

<script>
method: {
   addAlert() {
    this.managedAsset.alertDates.push({});
  },
}
</script>

CodePudding user response：

You could just check the length of the alert list to show thw label dynamically.

Here I displayed a span having content Another that will be displayed if the length of the array is greater than zero. You could either do this way or toggle the entire content.

I have made use of a computed property getAlerts to return the list of alerts that user have added.

new Vue({
  el: "#app",
  data() {
    return {
      managedAsset: {
        alertDates: [],
      },
    };
  },
  methods: {
    addAlert() {
      this.managedAsset.alertDates.push({});
    },
  },
  computed: {
    getAlerts: function () {
      return this.managedAsset.alertDates;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="not-as-small form-text mb-1">
    <div v-for="(alert, index) in getAlerts">
      Alert {{ index   1}}
    </div>
  </div>  
  <a href="#" @click.prevent="addAlert" class="text-cyan">&plus; Add <span v-if="getAlerts.length > 0">Another</span> Alert</a>
</div>

You can also make use of v-html for the same

new Vue({
  el: "#app",
  data() {
    return {
      managedAsset: {
        alertDates: [],
      },
    };
  },
  methods: {
    addAlert() {
      this.managedAsset.alertDates.push({});
    },
  },
  computed: {
    getAlerts: function () {
      return this.managedAsset.alertDates;
    },
    buttonLabel: function() {
      return this.managedAsset.alertDates.length === 0 ? '&plus; Add Alert' : '&plus; Add Another Alert'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="not-as-small form-text mb-1">
    <div v-for="(alert, index) in getAlerts">
      Alert {{ index   1}}
    </div>
  </div>  
  <a href="#" @click.prevent="addAlert" class="text-cyan" v-html="buttonLabel">
</div>