[Vuejs]-Displaying information using v-if from an API

by

1👍

✅

You don’t need a computed property for this. You can use v-if and v-else.

Alternatively, if you know that you will only have the text "FREE" or "PAID" without any markup needed, you might want to consider just using a ternary expression:

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

I added a cost class just to make it a little easier to see.

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

2👍

You can use v-if and 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>
👤Ihor

Leave a comment