Vue“v-for”仅显示最后一次迭代（在 v-select 中）

Question

我目前正在尝试使用数据和自定义项目文本填充我的 Vue 项目的 v-select。

我发现使用 v-for 在列表中有效，但在我的 v-select 模板中无效。

作品：

<ul id="example-1">
     <li v-for="item in appointments">
           ID: {{ item.id }} | {{ item.client_name }}
      </li>
 </ul>

显示：

- ID: 1 | John Smith
- ID: 2 | Carl Larson
- ID: 3 | Lennard Smith

然后是我的工作选择，它没有使用模板（有效）：

<v-select
   v-model="form.lead_generator_id"
   prepend-icon="person"
   :items="appointments"
   label="Appointment Setter"
   item-value="id"
   item-text="client_name"
></v-select>

然后是我的模板 v-select：

<v-select
  v-model="form.lead_generator_id"
  prepend-icon="person"
  :items="appointments"
  label="Appointment Setter"
  item-value="id"
  item-text="client_name"
>
    <template  slot="selection" slot-scope="appointments" v-for="item in appointments">
     ID: {{ item.id }} | {{ item.client_name }}
    </template>

    <template slot="item" slot-scope="appointments" v-for="item in appointments">
     ID: {{ item.id }} | {{ item.client_name }}
    </template>
</v-select>

最后一个的问题是它显示（在选择框中）：

ID: 3 | Lennard Smith
ID: 3 | Lennard Smith
ID: 3 | Lennard Smith

我正在通过 axios 从我的 API 收集信息，然后 storign 位于 data() 中，它返回 appointments: [],

我的 api 返回：

{
   "status":"ok",
   "appointments":[
        { "id": 1, "client_name": x, etc.. }
        { "id": 2, "client_name": x, etc.. }
    ],
}

请帮助我了解如何让它正确显示。

Answer 1

假设这是Vuetify's v-select component，我认为您误解了作用域插槽。

item 和 selection 插槽通过列表中的单个项目传递，您无需使用 v-for 迭代任何内容。

暂时忽略这一点，如果你只是想自定义显示的文本，你可以创建一个简单的函数来渲染文本并将其绑定到item-text，比如

<v-select :item-text="item => `ID: ${item.id} | ${item.client_name}`" ...

演示...

new Vue({
  el: '#app',
  data: {
    "appointments": [{
      "id": 1,
      "client_name": 'John Smith'
    }, {
      "id": 2,
      "client_name": 'Carl Larson'
    }, {
      "id": 3,
      "client_name": 'Lennard Smith'
    }],
    form: {
      lead_generator_id: null
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-content>
      <v-select v-model="form.lead_generator_id" 
                prepend-icon="person" :items="appointments" 
                label="Appointment Setter" item-value="id" 
                :item-text="item => `ID: ${item.id} | ${item.client_name}`">
      </v-select>
      <pre>form = {{ form }}</pre>
    </v-content>
  </v-app>
</div>

Answer 2

为什么在模板中使用 for 循环？正确的做法是给 v-select 模板，范围必须是“选项” - 正如文档所说。

<template slot="option" slot-scope="option">
   ID: {{ item.id }} | {{ item.client_name }}
</template>

试试这个 https://codepen.io/anon/pen/RdVRRz