Vue-Multiselect и Vuex: предварительно выбрав значение из магазина - PullRequest
Новая
       34

Vue-Multiselect и Vuex: предварительно выбрав значение из магазина

1 голос
/ 12 июня 2019

представьте себе приложение Vuejs с Vuex.Я хочу иметь выпадающий список.Базовый пример в компоненте Vue: 

<template>
  <div>
    <multiselect
      v-model="values"
      :options="options">
    </multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  export default {
    components: { Multiselect },
    data () {
      return {
        values: null,
        options: ['bar', 'foo', 'hello','test']
      }
    }
  }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

Теперь, если я инициализирую «значения» в данных следующим образом: 

values: ["test"]

В раскрывающемся списке множественного выбора «test» уже выбранвариант.Я также могу отменить выбор по щелчку и выбрать его снова, так как он есть в настройках.

Если я пытаюсь инициализировать свои значения следующим образом: 

values:[this.$store.state.variableIwantPreselected]

, он не работает полностью.В области поиска области выбора / раскрывающегося списка обычно отображаются те зеленые поля с именем выбранного элемента.Для меня он не отображает строку в зеленом поле, , которое находится в этом. $ Store.state.variableIwantPreselected , но только только небольшая зеленая коробка без ничегонаписано в нем .

Я думаю, что что-то упустил из-за Vuex и хуков жизненного цикла, но я не мог понять, что именно.

Ответы [ 2 ]

1 голос
/ 13 июня 2019

Еще одно замечание для людей, сталкивающихся с подобными проблемами: проверьте, когда ваш компонент отображается / загружается.В моем случае он был загружен до того, как значение в хранилище было изменено (обычно это происходит, когда вы используете vue-router и у нескольких компонентов отображается только один маршрут).

Решение: взгляните глубже на обновленный хук жизненного цикла.

Теперь я вызываю функцию в обновленном хуке жизненного цикла.Функция объявлена ​​в методах.Функция проверяет, имеют ли мои значения (теперь инициализированные как пустой список) длину 0. Если это так, значение хранилища помещается в список.

в данных: 

values: []

в методах: 

checkValues (){
    if(this.values.length === 0){
        this.values.push(this.$store.state.variableIwantPreselected)
    }
}

в обновлении (): 

this.checkValues()
1 голос
/ 12 июня 2019

Если вы работаете с Vuex, лучший способ манипулировать данными в состоянии использования хранилища,
мутации, действия и геттеры для получения данных любого типа. Для получения дополнительной информации проверьте этот пост

...