To display the label dynamically, you can check the length of the alert list.
In this example, a span with the content Another is displayed when the array's length is greater than zero. This method can be used alternatively to toggling the entire content.
A computed property named getAlerts is utilized to retrieve the list of alerts added by the user.
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">+ Add <span v-if="getAlerts.length > 0">Another</span> Alert</a>
</div>
You can also use v-html for the same purpose
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 ? '+ Add Alert' : '+ 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>