Displaying information using v-if from an API

I want the tag that currently says true or false, I want it to say "FREE" if it's free and say "PAID" if it's not.

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

I'm getting a response from data.events.is_free in the form of a boolean that's true if free and false if not.

I know I have nothing between the v-if tags, but the whole thing goes blank if add anything.

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

Here's a link to my Codepen.

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>