Подключите v-select к vuex: проблема [объект объект]

Я пытаюсь создать раскрывающийся список (v-select / q-select (с использованием quasar)), который позволяет мне выбирать из массива в моем хранилище vuex, а затем в конечном итоге сохранять выбранный элемент (его содержимое) в переменной. В настоящее время у меня нет проблем с доступом к хранилищу vuex, но я столкнулся с проблемой, когда v-select ожидает строку, а не объект.

Мой код выглядит следующим образом.

// vuex storage:

const state = {
  savedsystems: 
     [
      id: "1",
      system: {...}
     ],
     [
      id: "2",
      system: {...}
     ]

 // example of the vuex storage out of my viewdevtools
 systemsconstant: Object
   savedsystems:Array[2]
     0:Object
       id:"first"
       system:Object
         7a73d702-fc28-4d15-a54c-2bb950f7a51c:Object
           name:"3"
           status:"defined"

         88519419-8a81-48f1-a5e6-5da77291b848:Object
           name:"5"
           status:"not defined"
     1:Object
       id:"second"
       system:Object
         7a73d702-fc28-4d15-a54c-2bb950f7a51c:Object
           name:"3"
           status:"not defined"

         88519419-8a81-48f1-a5e6-5da77291b848:Object
           name:"9"
           status:"defined"
}


// dropdown:

    <q-select 
      outlined 
      dense 
      emit-value
      :value="currentsystem"
      :options="savedsystems" 
      label="selectsystem" />


// computed to get systems from vuex:

computed: {
    savedsystems() {
      return this.$store.getters['systemsconstant/getsavedsystems'] 
    }
  },

Я использовал следующий пример https://codepen.io/sagalbot/pen/aJQJyp в качестве вдохновения. и попробовал пару разных настроек, которые на самом деле ни к чему не привели.

Если бы кто-то попытался применить мой случай к аналогичной проблеме (v-select отображает объект Object), указанная метка формата будет объектом, а не строкой.

Вопрос: Как я могу изменить (с помощью геттера) импортированный массив объектов savesystems, чтобы его можно было использовать как метку для его выбора, а также для правильного подключения к значениям, чтобы я мог сохранить выбранное как переменную. Или я могу что-то изменить в моем v-select, например меняя то, что стоит за: варианты / варианты?

Буду признателен за любую помощь!


person C B    schedule 26.08.2020    source источник
comment
Из вашего описания проблема не ясна. Мне понадобится код для выбора, а также образцы данных для сохраненных систем.   -  person Kuldip Shelke    schedule 26.08.2020
comment
@KuldipShelke Я изменил его для возможных более поздних читателей. Спасибо, Кульдип!   -  person C B    schedule 26.08.2020


Ответы (1)


Вы должны использовать свойство option-label

    <div id="q-app">
      <div class="q-pa-md" style="max-width: 300px">
        <div class="q-gutter-md">
          <q-badge color="secondary" multi-line>
            Model: "{{ model }}"
          </q-badge>
    
          <q-select filled v-model="model" :options="options" label="Standard" option-label="description"></q-select>
          
          {{ model }}
        </div>
      </div>
    </div>

JS:

new Vue({
  el: '#q-app',
  data () {
    return {
      model: null,
      options: [
        {
          label: 'Google',
          value: 'Google',
          description: 'Search engine',
          category: '1'
        },
        {
          label: 'Facebook',
          value: 'Facebook',
          description: 'Social media',
          category: '1'
        },
        {
          label: 'Twitter',
          value: 'Twitter',
          description: 'Quick updates',
          category: '2'
        },
      ]
    }
  }
})

https://codepen.io/reijnemans/pen/bGpqJYx?editors=1010

person dreijntjens    schedule 26.08.2020
comment
потрясающе, спасибо вам большое! Это решило ее. Теперь я напишу это в новой переменной на основе этого. - person C B; 26.08.2020