如果“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,
};
uj5u.com熱心網友回復：
只需為此欄位添加計算 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')是不反應性性質; 因此，每次更改都必須伴隨著組件的重新繪制。或者，您可以使用，例如，useLocalStorage來自vueuse. 這將有助于使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,
};
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397592.html
標籤：javascript Vue.js if 语句 本地存储
下一篇：php獲取最接近1的值