[Vuejs]-How to change the "card" in a span tag – Vue.JS?

by

0👍

✅

Just add computed getter for this field:

setup() {
  const cards = useCards();
  const list = computed(() => cards.state.details);
  const local = localStorage.getItem("key");

  const localizedName = computed(() => (card) => {
    if (local === 'jp') {
      return card.name_jp
    } else {
      return card.name_en
    }
  })

  return {
    list,
    lan,
    local,
    localizedName,
  };
}

And use it as:

<span class="span2">+</span> {{ localizedName(card) }}</span>

Note that changing the value in localStorage does not redraw the component. The localStorage.getItem('key') is not a reactive property; therefore, each change must be accompanied by a redrawing of the component. Alternatively, you can use, for example, the useLocalStorage from the vueuse. This will help make the local values reactive:

setup() {
  const cards = useCards();
  const list = computed(() => cards.state.details);
  const local = useLocalStorage("key");

  const localizedName = computed(() => (card) => {
    if (local.value === 'jp') {
      return card.name_jp
    } else {
      return card.name_en
    }
  })

  return {
    list,
    lan,
    local,
    localizedName,
  };
}

Leave a comment