使用 API 中的 v-if 显示信息

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

这是我的代码笔 link。

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 and v-else.

或者，如果您知道您将只有文本 "FREE" 或 "PAID" 而无需任何标记，您可能需要考虑只使用三元表达式：

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

我添加了一个 cost class 只是为了让它更容易看。

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 显示信息

Displaying information using v-if from an API

html

javascript

eventbrite

vue.js