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收集信息，然后存储在data（）中，该数据返回appointments: [],

我的api返回：

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

请帮助我了解如何使其正确显示。

Answer 1

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

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

尝试一下 https://codepen.io/anon/pen/RdVRRz

Answer 2

假设这是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>

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

2 个答案: