英文:
Setting v-select default value with if conditions
问题
I have a dropdown menu where I want the default value to be set based on the login usertype.
我有一个下拉菜单，我希望默认值根据登录用户类型进行设置。
I have the this page to appear after login, and I want the v-select option choice to be chosen according to the usertype condition and store the select value in localStorage.
登录后我有这个页面显示，我希望根据用户类型条件选择v-select选项，并将选择的值存储在localStorage中。
I put the if conditions in method, but the v-select default value still is shown as null. How can I pass and store the default value based on the usertype conditions when login and refresh.
我将条件放在方法中，但是v-select的默认值仍然显示为null。当登录和刷新时，如何根据用户类型条件传递和存储默认值呢？
#vue 2.6 vuetify 2.3
<template>
<h1>title</h1>
<v-select
:items="items"
v-model="select"
></v-select>
</template>
<script>
export default {
data() {
return {
items: ['A','B'],
select: localStorage.getItem('select'),
};
},
watch: {
select(value) {
localStorage.setItem('select', value);
console.log(localStorage.getItem('select'));
},
},
mounted() {
this.selectChoice();
},
methods: {
selectChoice() {
if (this.users.types >= 0) {
this.select = 'A';
}
else if (this.users.types >= 2) {
this.select = 'B';
}
},
},
};
</script>
英文:
I have a dropdown menu where I want the default value to be set based on the login usertype.
I have the this page to appear after login, and I want the v-select option choice to be chosen according to the usertype condition and store the select value in localStorage. I put the if conditions in method, but the v-select default value still is shown as null. How can I pass and store the default value based on the usertype conditions when login and refresh.
#vue 2.6 vuetify 2.3
<template>
<h1>title</h1>
<v-select
:items:"items"
v-model:"select"
></v-select>
</template>
<script>
export default {
data() {
return {
items: ['A','B'],
select: localStorage.getItem('select'),
};
},
watch: {
selected(value) {
localStorage.setItem('select', value);
console.log(localStorage.getItem('select'));
},
},
mounted() {
this.selectChoice();
},
methods: {
selectChoice() {
if (this.users.types>=0) {
this.select = 'A';
}
else if (this.users.types>=2) {
this.select = 'B';
}
},
},
};
</script>
答案1
得分: 1
这是错误的
<v-select
:items:"items"
v-model:"select"
></v-select>
应该是
<v-select
:items="items"
v-model="select"
></v-select>
还有
watch: {
select(value) { // 而不是 selected
localStorage.setItem('select', value);
console.log(localStorage.getItem('select'));
},
}
另外，this.users 未定义，应该引发 JavaScript 异常。
英文:
This is wrong
<v-select
:items:"items"
v-model:"select"
></v-select>
should be
<v-select
:items="items"
v-model="select"
></v-select>
and
watch: {
select(value) { // instead of selected
localStorage.setItem('select', value);
console.log(localStorage.getItem('select'));
},
}
Also, this.users is not defined and should throw an js exception.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论