Vue JS v-select 无法显示来自 json 的文本

Question

我在编辑数据时很难使用 vue-select (v-select)。 目前v-select显示的是ID，应该出现的数据是文本或者label。

const detailPresensi = {
      detail_data: [{
          "id": 3,
          "project_id": 1,
          "duration_minute": 300,
          "detail": "Text 1"
      }, {
          "id": 4,
          "project_id": 2,
          "duration_minute": 203,
          "detail": "Text 2"
      }]
    }

    let options = {
      "1": "AAA",
      "2": "BBB",
      "3": "CCC",
    };

这是脚本： jsfiddle

我的期望：如果 detail_data 中的数据数组有 project_id: 1 那么显示的数据是名称“AAA”，

谢谢。

Answer 1

尝试向数据添加opsi ，数据属性需要为 function：

data() {
  return {
    ...,
    opsi: [] 
  }
}

Answer 2

编辑-

我相信你需要先解决一些问题——

1. 数据中缺少opsi属性。
2. 数据不是 function。

现在，关于始终在所选选项中显示 id 的问题，因此，这背后的原因是使用了 reduce。 它在文档的部分Caveats with reduce中提到 -

reduce 最常见的问题是当组件显示你的减少值而不是它的 label 时。当你提供 Vue Select 一个值或具有 reduced_ 值的 v-model 绑定时，会发生这种情况，但选项数组中不存在完整选项 object .

因此，要么删除 reduce 要么如果想继续reduce ，您需要执行以下操作-

1. 您在循环中使用v-select ，这意味着每个v-select都应该有自己的v-model绑定，因此为每个数据项创建一个selected变量并使用v-model="item.selected" 。
2. 要从opsi数组中显示受尊重的项目 ID 的 label，默认情况下将其放入项目的选定变量中，如下所示 -

detail_data: [{
    "id": 3,
    "project_id": 1,
    "duration_minute": 300,
    "detail": "Text 1",
    "selected": [{
      "id": 1,
      "name": 'AAA'
    }]
  },
  {
    "id": 4,
    "project_id": 2,
    "duration_minute": 203,
    "detail": "Text 2",
    "selected": [{
      "id": 2,
      "name": 'BBB'
    }]
  }
]

3. 最后，像这样在您的模板中使用它-

<v-select 
  :options="opsi" 
  :reduce="opsi => opsi.id" 
  label="name"
  v-model="item.selected" 
  :required="!item.project_id"
>
</v-select>

阅读更多关于-

1. 在循环中使用 v-select。
2. 使用插槽显示选定的文本。