如何在 vue 中根据 v-if 更改 href 名称

Question

此时它在我的表单上显示添加警报后它仍然显示相同 link 添加警报我想在添加第一个警报后显示添加另一个警报但我不知道我怎么能这样做

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

Answer 1

您可以只检查警报列表的长度以动态显示标签。

这里我显示了一个span，内容为Another，如果数组的长度大于零就会显示。您可以这样做，也可以切换整个内容。

我已经使用 computed 属性 getAlerts 到 return 用户添加的警报列表。

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>

您也可以使用 v-html 来实现同样的效果

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>

如何在 vue 中根据 v-if 更改 href 名称

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

javascript

vue.js

vue-component