Как я должен отображать разные кнопки на основе записи в базе данных, когда у них есть отдельный фронт и бэкэнд

Question

У меня есть отдельные передний и задний конец. Внешний интерфейс - это JavaScript с Vue.js, а внутренний - это PHP с Laravel. Аутентификация основана на токене.

Я создал функциональность, которая позволяет пользователю создавать список желаний, а для того, чтобы добавить его в список желаний, пользователь должен нажать кнопку. Когда пользователь желает добавить в список видение, в базу данных вставляется запись, и я могу определить, занял ли пользователь список мест на основе этого. Теперь я пытаюсь изменить, какая кнопка отображается при загрузке компонента на основе записи в базе данных.

<template>
    <div>
        <button @click='addTo("wishlistedPlaces")'>Remove from wishlist</button>
        <button @click='addTo("wishlistedPlaces")'>Add to wishlist</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            placeId: this.$route.params.placeid,
            sight: null
    },
    mounted() {
        axios.get('/getSight/' + this.placeId)
        .then(response => {
            this.sight = response.data.result.result;
        }).catch((error) => console.log(error));
    }
</script>

Запрос GET для смонтированного выполняет эту функцию PHP, которая просто возвращает информацию о виде:

public function getSight(Request $request, $placeId) {
    $get = file_get_contents("https://maps.googleapis.com/maps/api/place/details/json?placeid=" . $placeId . "&key=");
    $result = json_decode($get);

    return response()->json([
        'result' => $result
    ], 201);
}

И этот код, еще нигде не реализованный, возвращает истину или ложь в зависимости от того, занес ли пользователь в определенный список определенное место или нет:

$user = User::where('username', $username)->first();
$checkIfWishlisted = $user->wishlistedPlaces->contains(function ($place) use ($placeId) {
    return $place->place_id == $placeId;
});

Итак, мой вопрос: где именно в бэк-энде я должен проверять, есть ли у пользователя список желаемых мест, чтобы я мог отправить логический ответ на фронт-энд, а затем, как мне использовать этот булев в переднем конце?

Answer 1

Теперь я пытаюсь изменить, какая кнопка отображается при загрузке компонента на основе записи в базе данных.

Один из способов - создать другое свойство данных для хранения информации оесли он есть в списке пользователей или нет

data() {
  return {
    onWishlist: false
  }
}

Под смонтированным вызовом сделайте еще один вызов axios.

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

В шаблоне сделайте оператор v-if для кнопок

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

Рабочий код: https://codepen.io/bergur/pen/EzEBWo