[Vuejs]-How am I meant to render different buttons based on a record in database when having a separated front & back end

by

0👍

Now I am trying to change which button is rendered when the component
is loaded based on the record inside the database.

One way would to create another data property to hold information about if the user has it on whishlist or not

data() {
  return {
    onWishlist: false
  }
}

Under mounted make another axios call.

mounted() {
  axios.get('/checkWishlist/' + this.placeId)
    .then(response => {
      this.onWishlist= response.data;
     })
    .catch((error) => console.log(error));
    }

In the template make a v-if statement on the buttons

<button v-if="onWishlist" @click='addTo("wishlistedPlaces")'>Remove from wishlist</button>
<button v-if="!onWishlist" @click='addTo("wishlistedPlaces")'>Add to wishlist</button>

Working codepen: https://codepen.io/bergur/pen/EzEBWo

Leave a comment