如何更改跨度标签中的“卡片” - Vue.JS？

Question

如果 "const local (const local = localStorage.getItem("key");" 等于 "name_jp"，则将 "card.name_en" 更改为 span 标签内的 "card.name_jp"。我怎样才能有效且正确地做到这一点？

***对不起我的英语不好

    <div class="b-card" v-for="card in list" :key="card.id">
        <span class="span" id="name">
          <span class="span2">+</span> {{ card.name_en }}</span>
    </div>
    </div>

  </div>
</template>

<script>
import { computed } from "vue";
import { lan } from "@/modules/languages";
import useCards from "@/modules/geral";

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

    return {
      list,
      lan,
      local,
    };

Answer 1

只需为该字段添加计算 getter：

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,
  };
}

并将其用作：

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

请注意，更改localStorage 中的值不会重绘组件。 localStorage.getItem('key') 不是反应属性；因此，每次更改都必须伴随着组件的重新绘制。或者，您可以使用例如来自vueuse 的useLocalStorage。这将有助于使 local 值具有反应性：

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,
  };
}