Есть форма с настройками пользователя, где есть селекты. С сервера должно прийти значение этого селекта
Пробовал байндить selected, передавал в него true, но он не отображается
<div class="input-field">
<select id="role" v-model='role'>
<option disabled :selected="!role">Enter Role User</option>
<option value="admin" :selected="{selected: role === 'admin'}">Admin</option>
<option value="manager" :selected="role === 'manager'">Manager</option>
<option value="author" :selected="role === 'author'">Author</option>
<option value="user" :selected="role === 'user'">User</option>
</select>
</div>
Вот мой scripts
<script>
import Header from '@/admin/components/header/Header'
import Section from "@/admin/components/Section"
import Loader from "@/admin/components/Loader"
import Save from '@/admin/components/Save'
import DefaultWidget from "@/admin/components/widget/Default"
import ImageWidget from "@/admin/components/widget/Image"
// Validator
import {required, email} from 'vuelidate/lib/validators'
export default {
name: 'Profile',
data: () => ({
breadcrumb: [{label: 'Dashboard', url: '/'}, {label: 'Users', url: '/users'}, {label: 'Profile'}],
loader: true,
nickname: '',
name: '',
surname: '',
email: '',
biography: '',
avatar: '',
role: '',
language: '',
}),
validations: {
email: {required, email},
},
async mounted() {
this.loader = false
const nickname = JSON.parse(localStorage.getItem('login')).login
await this.$store.dispatch('getUser', nickname)
try {
const user = this.$store.getters.getUser
this.name = user.name
this.surname = user.surname
this.biography = user.biography
this.nickname = user.nickname
this.email = user.email
this.avatar = user.avatar
this.role = user.role
this.displayName = user.displayName
this.language = user.language
} catch (err) {
await this.$error(err)
}
console.log(this.role)
await $('select').material_select();
await $('textarea#biography').characterCounter();
// Fixed Materialize Select
const self = this;
$('#displayName').on('change', function () {
self.$emit("change_name", this.value)
});
$('#role').on('change', function () {
self.$emit("change_role", this.value)
});
$('#language').on('change', function () {
self.$emit("change_language", this.value)
});
self.$on("change_name", function (data) {
this.displayName = data
});
self.$on("change_role", function (data) {
this.role = data
});
self.$on("change_language", function (data) {
this.language = data
});
},
methods: {
async saveSetting() {
const nickname = JSON.parse(localStorage.getItem('login')).login
if (this.$v.$invalid) {
this.$v.$touch()
return
}
const formData = {
name: this.name,
surname: this.surname,
email: this.email,
biography: this.biography,
role: this.role,
language: this.language
}
this.$store.commit('setUser', formData)
try {
await this.$store.dispatch('setUser', nickname)
this.$message('Настройки пременены')
} catch (err) {
if(typeof err === "object") {
Object.entries(err).forEach(error => this.$message(`[${error[0].toUpperCase()}] ${error[1]}`))
return
}
await this.$warn(err)
}
},
},
components: {
Header, Section, Save, DefaultWidget, ImageWidget, Loader
},
beforeDestroy() {
$('select').material_select('destroy');
}
}
</script>
v-model='role'
достаточно.:selected ...
нужно удалить.await $('select').material_select();
убрать, то есть использовать встроенный select - работает? Тогда проблема в материал селект, поищите версию для вью, либо пример интеграции с вью. jQuery напрямую оперирует DOM, а VUE - имеет shadow dom.