本文介绍了如何在Vuejs中刷新页面也能保持localstorge中的数组值？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
HelloWorld.vue
<template>
<div>
<div v-for="item in items" :key="item.cakeid">
<b> id: {{ item.cakeid }}</b>
<router-link
:to="{
name: 'UserWithID',
params: { id: item.cakeid },
query: { cakeid: item.cakeid },
}"
>
{{ item.cakeName }}
</router-link>
</div>
<br /><br /><br />
<User />
<br /><br /><br />
<tabs />
</div>
</template>
<script>
import User from "./User.vue";
import tabs from "./tabs.vue";
import { router } from "./router";
export default {
name: "HelloWorld",
components: {
User,
tabs,
},
data() {
return {
items: router,
};
},
};
</script>User.vue
<template>
<div>
<div v-for="(item, key) in user" :key="key">
{{ item.cakeName }} <br />
{{ user.total }}{{ item.cakePrice }} <br />
{{ user.total }}{{ item.total }}
</div>
</div>
</template>
<script>
import { routerid } from "./routerid";
export default {
name: "User",
data() {
return {
lists: routerid,
};
},
computed: {
user: function () {
return this.lists.filter((item) => {
if (item.cakeid === this.$route.params.id) {
return item;
}
});
},
},
};
</script>tab.vue
<template>
<div>
<div v-for="(item, key) in user" :key="key">
{{ item.chefname }} <br />
{{ user.feedback }}{{ item.rating }} <br />
</div>
</div>
</template>
<script>
import { tabsandcontent } from "./tabsandcontent";
export default {
name: "User",
data() {
return {
lists: tabsandcontent,
};
},
computed: {
user: function () {
return this.lists.filter((item) => {
if (item.cakeid === this.$route.params.id) {
return item;
}
});
},
},
};
</script>如何在Vuejs中刷新页面后仍保持数据活动？
在单击routerlink时，我根据每个数组ID过滤一些值。并显示这些数组值。在此过程中，单击路由器链接显示数组值后，如果刷新页面，则不会显示之前显示的所有数组值。
我想保留数据，即使在刷新页面之后也是如此(就像之前单击的状态一样)。我认为这可以通过使用localstorage get和set项来处理。但不确定将其放置在哪里。？
推荐答案
问题是，当您刷新页面时，User.vue中的这部分this.$route.params.id以字符串形式返回id，并且您使用三个相等的符号检查item.cakeid === this.$route.params.id。因此，这意味着您不仅要求这些值相等，而且要求它们属于同一类型。
只需将其更改为==或使用parseInt函数从字符串解析整数即可。
这篇关于如何在Vuejs中刷新页面也能保持localstorge中的数组值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！