상태 변경 후 v-if를 사용하여 요소 숨기기

상태 변경 후 v-if를 사용하여 요소 숨기기

이걸로 이틀째 머리를 짓누르고 있는데 아직 반응성을 이해하지 못하고 있는 것 같아요.

컴포넌트는 다음과 같습니다.

<template>
  <div class="tile-content">
    <router-link :to="{ name: 'anime', params: { slug: slug } }">
      <div class="overlay"></div>
      <figure class="image is-16by9">
        <img :src="cover || defaultCover">
      </figure>
      <div class="name">
        <h3>{{ name }}</h3>
      </div>
      <div class="bookmark" v-if="isAuthenticated">
        <div v-if="isBookmarked" @click.prevent="unBookmark">
          <b-icon icon="star"></b-icon>
        </div>
        <div v-else @click.prevent="addBookmark">
          <b-icon icon="star-outline"></b-icon>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import { mapState } from 'vuex';
import UserModule, { IUserState } from '@/app/account/store';

@Component({
  computed: {
    ...mapState<IUserState, any>('User', {
      isAuthenticated: (state: IUserState) => !!state.account.token,
      bookmarks: (state: IUserState) => state.bookmarks,
    }),
    isBookmarked: function() {
      this.bookmarks.has(this.slug);
    }
  }
})
export default class Tile extends Vue {
  @Prop() private name!: string;
  @Prop() private slug!: string;
  @Prop() private cover!: URL;
  private isAuthenticated!: boolean;
  private isBookmarked!: boolean;
  private bookmarks!: Set<string>;

  get defaultCover() {
    return require('@/assets/default-cover.jpg');
  }

  private async addBookmark() {
    UserModule.AddBookmark(this.slug);
  }

  private async unBookmark() {
    UserModule.RemoveBookmark(this.slug);
  }
}
</script>

<style lang="scss" scoped>
</style>

제가 이루고 싶은 것은 다음과 같습니다.

북마크 [A, B, C]를 가진 GIVEN 사용자(각 북마크 "slug")
사용자가 B에서 별을 클릭할 때
그런 다음 Bookmark 해제가 트리거되어 B가 상태에서 제거됩니다.북마크
AND 스타는 스타트 아웃 라인으로 바뀝니다.

문제는 북마크는 계산된 변수이고 slug는 버팀목이고 상태가 바뀔 때마다 비교할 방법을 찾을 수 없다는 것입니다.

Set type이 Vue에서 반응하지 않는 것을 확인했습니다(아직).

https://github.com/vuejs/vue/issues/2410#issuecomment-434990853

Vue 3로 예정되어 있습니다.

watcher https://vuejs.org/v2/guide/computed.html 를 사용할 수 있습니다.

또한 라이프 사이클 훅에 관심이 있을 수 있습니다.업데이트 전, 갱신.

언급URL : https://stackoverflow.com/questions/59573679/hide-element-with-v-if-after-a-state-change