Question

我想要当前写着true或false的标签，如果它是免费的，我希望它说“ FREE”，如果不是，则说“ PAID”。

https://www.eventbriteapi.com/v3/events/search/?location.address=45+Depot+Ave.++Bronx%2C+NY+10457&location.within=50mi&token=6RXWSSZPE4APEYSWTJJF

我从data.events.is_free获得了一个布尔值形式的响应，布尔值的形式为true，如果没有则为false。

我知道v-if标签之间没有任何内容，但是如果添加任何内容，整个内容将变为空白。

HTML：

<div id="app" class="container">
  <h1 id="header" class="title is-1 has-text-centered">Event Lookup for ECH</h1>
  <div v-for="event in info">
    <h2 class="title is-4" id="eventName">{{ event.name.html }} <span v-if="" class="tag is-success">{{ event.is_free }}</span></h2>
    <div id="eventDescription">{{ event.description.text }}</div>
    <div id="eventDateTime">{{ event.start.local }} - {{ event.end.local }}</div>
  </div>
</div>

Vue / JS

// The plan is to make this more extensive later
// https://www.eventbriteapi.com/v3/events/search/?location.address=45+Depot+Ave.++Bronx%2C+NY+10457&location.within=50mi&token=6RXWSSZPE4APEYSWTJJF
// This is a random address...

const baseUrl = 'https://www.eventbriteapi.com/v3/events/search/?location.address=45+Depot+Ave.++Bronx%2C+NY+10457&location.within=50mi&token=6RXWSSZPE4APEYSWTJJF';

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get(baseUrl)
      .then(response => (this.info = response.data.events))
  },
  computed () {
    isFree
      if (response.data.events.is_free == true) {
        return true;
      }
      else {
        return false;
      }
  }
})

https://codepen.io/Mortiferr/pen/qyajJd

这是我Codepen的链接。

Answer 1

您可以使用v-if和v-else。

<div id="app" class="container">
  <h1 id="header" class="title is-1 has-text-centered">Event Lookup for ECH</h1>
  <div v-for="event in info">
    <h2 class="title is-4" id="eventName">{{ event.name.html }}
      <span v-if="event.is_free" class="tag is-success">Free</span>
      <span v-else class="tag is-success">Paid</span>
    </h2>
    <div id="eventDescription">{{ event.description.text }}</div>
    <div id="eventDateTime">{{ event.start.local }} - {{ event.end.local }}</div>
  </div>
</div>

Answer 2

您不需要为此计算属性。您可以使用v-if和v-else。

或者，如果您知道只使用文本“ FREE”或“ PAID”而不需要任何标记，则可以考虑使用三元表达式：

<span class="tag is-success">{{event.is_free ? "FREE" : "PAID"}}</span>

我添加了一个cost类，只是为了使其更易于查看。

const baseUrl = 'https://www.eventbriteapi.com/v3/events/search/?location.address=45+Depot+Ave.++Bronx%2C+NY+10457&location.within=50mi&token=6RXWSSZPE4APEYSWTJJF';

new Vue({
  el: '#app',
  data() {
    return {
      info: null,
      isFree: false
    }
  },
  mounted() {
    axios
      .get(baseUrl)
      .then(response => {
        this.info = response.data.events;
        this.isFree = response.data.events
      })
  }
})

.cost {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<div id="app" class="container">
  <h1 id="header" class="title is-1 has-text-centered">Event Lookup for ECH</h1>
  <div v-for="event in info">

    <!-- Using v-if/else -->
    <h2 class="title is-4" id="eventName">{{ event.name.html }}
      <span v-if="event.is_free" class="cost tag is-success">FREE</span>
      <span v-else class="cost tag is-success">PAID</span>
    </h2>

    <!-- Using ternary -->
    <h2 class="title is-4" id="eventName">{{ event.name.html }}
      <span class="cost tag is-success">{{event.is_free ? "FREE" : "PAID"}}</span>
    </h2>

    <!--<div id="eventDescription">{{ event.description.text }}</div>-->
    <div id="eventDateTime">{{ event.start.local }} - {{ event.end.local }}</div>
  </div>
</div>

使用来自API的v-if显示信息

2 个答案: