0

Есть форма с настройками пользователя, где есть селекты. С сервера должно прийти значение этого селекта

Пробовал байндить 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>

введите сюда описание изображения

Role это string введите сюда описание изображения

Вот мой 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>

введите сюда описание изображения

11
  • v-model='role' достаточно. :selected ... нужно удалить. Commented 26 окт. 2020 в 15:20
  • PS. Предполагаю, что role - это строка "admin/manager/...". Если объект с uuid и каким-нибудь name, то - другим способом. Если не сработает что я написал выше, покажите что такое role - тип, пример. Commented 26 окт. 2020 в 15:24
  • Я точно не помню, но оно вроде работало раньше
    – Mr. Byte
    Commented 26 окт. 2020 в 15:29
  • Если await $('select').material_select(); убрать, то есть использовать встроенный select - работает? Тогда проблема в материал селект, поищите версию для вью, либо пример интеграции с вью. jQuery напрямую оперирует DOM, а VUE - имеет shadow dom. Commented 26 окт. 2020 в 15:45
  • PS. Похоже, решение вот в этом: stackoverflow.com/q/33704122/9435985 Commented 26 окт. 2020 в 15:49

2 ответа 2

0
               <div class="input-field">
                 <select id="role" v-model='role'>
                   <option disabled value="">Enter Role User</option>
                   <option value="admin">Admin</option>
                   <option value="manager">Manager</option>
                   <option value="author">Author</option>
                   <option value="user">User</option>
                 </select>
               </div>
0

Виноват materialize

Вот мой костыль, может кому поможет

Добавил ref к селекту и ищу все лишки и switch добавляю классы

Есть решение по меньше

    await setTimeout(() => {
      console.log('sdsadsa')
    }, 0)

    await $('select').material_select();
    await $('textarea#biography').characterCounter();

Костыль

                    <div class="input-field" ref="role">
                      <select id="role" v-model='role'>
                        <option disabled value="">Enter Role User</option>
                        <option value="admin">Admin</option>
                        <option value="manager">Manager</option>
                        <option value="author">Author</option>
                        <option value="user">User</option>
                      </select>
                    </div>
    async setRole() {
      const role = this.role
      const listRole = await this.$refs.role.getElementsByTagName('li')

      switch (listRole) {
        case role === 'admin':
          listRole[1].className = 'active selected'
          break
        case role === 'manager':
          listRole[2].className = 'active selected'
          break
        case role === 'author':
          listRole[3].className = 'active selected'
          break
        case role === 'user':
          listRole[3].className = 'active selected'
          break
      }
    },

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.