将v-select与vuex连接：问题[对象对象]

问题描述

我正在尝试创建一个下拉列表（v-select / q-select（使用类星体）），它允许我从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 displays object Object），则提到的formatlabel将是一个对象而不是字符串。

问题： 如何修改（使用吸气剂）导入的对象“ savedsystems”数组，以便既可以用作标签来选择它，又可以将其正确地连接到值，因此可以将选择的结果保存为变量。 或者我可以在v选择中更改某些内容，例如改变：options / options后面的内容？

我将不胜感激！

解决方法

您应该使用属性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',{
          label: 'Twitter',value: 'Twitter',description: 'Quick updates',category: '2'
        },]
    }
  }
})

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