标签: v-select

v-select 允许添加 append-outer-icon 但如何在单击此项时强制展开图标列表？

 <v-select                
        :items="selectItems.position"
        v-model="selectedPosition"            

        clear-icon="highlight_remove"  
        append-icon="unfold_more"
        append-outer-icon="unfold_more"
        @click:append-outer="openSelect"                                                                  
        >

@click:append-outer 允许添加回调函数，但我在 openSelect 中做了什么来扩展项目的列表？

我有vuetify webpack项目

在我的一个Vue组件中，我将v-select与：items设置为名为“ levels”的通用数字数组，并将v-model设置为具有通用数字的数据属性“ level”

因此，问题在于，如果使用prop初始化“ level”，则v-select不会在启动时显示初始值-如果通过常量初始化“ level”，则v-select会显示ok。像这样：

  props: ['initLevel'],
  data () {
    return {
      levels,
      level: this.initLevel
    }
  }

这不能正常工作，但这：

...
level: 25
...

工作正常

v-select用法是：

         <v-select
            label="Select Level"
            :items="levels"
            v-model="level"
            max-height="200"
            dense
            autocomplete
          >
        </v-select>

除了在启动问题时显示初始值外，v-select还可以正常工作

那么如何解决这个问题，其原因是什么呢？

v-select尽管数组 (persons) 有 22 个元素，但似乎只显示了数组中的 20 个元素，但是如果我使用自动完成功能，我可以在列表中看到这 2 个缺少的人，因此在我开始寻找使用自动完成功能之前，它们实际上不会显示. 代码如下：

<v-select
  :items="persons"
  v-model="model.persons"
  label="Persons:"
  item-text="name"
  item-value="id"
  multiple
  chips
  max-height="auto"
  autocomplete
>
  <template slot="selection" slot-scope="data">
    <v-chip
      :selected="data.selected"
      :key="JSON.stringify(data.item)"
      close
      class="chip--select-multi"
      @input="data.parent.selectItem(data.item)"
    >
       {{ data.item.name }}
    </v-chip>
  </template>
  <template slot="item" slot-scope="data">
    <template v-if="typeof data.item !== 'object'">
      <v-list-tile-content v-text="data.item"></v-list-tile-content>
    </template>
    <template v-else>                       
      <v-list-tile-content>
        <v-list-tile-title v-html="data.item.name"></v-list-tile-title>
      </v-list-tile-content>
    </template>
  </template>
</v-select>

是否有任何v-select选项可用于增加该数字？

我有一个从用户那里获取地址的组件，其中一部分是状态。我按照文档进行操作，但找不到我的代码与文档相比有什么不同。问题是，当我单击按钮显示选项时，什么也看不见。如果我输入名称，它会按预期进行选择。所有其余输入都可以正常工作，但它们是 v 文本字段。除了一些验证内容之外，我没有发现任何问题。

<template>
  <v-card>
    <v-container>
      <!-- some other stuff -->
      <v-select
        :items="items"
        label="State"
        @input="_=>state=_"
      ></v-select>
    </v-container>
  </v-card>
</template>

<script>
export default {
  data: () => ({
    items: [
      '',   'AL', 'AK', 'AZ', 'AR',
      'CA', 'CO', 'CT', 'DE', 'DC',
      'FL', 'GA', 'HI', 'ID', 'IL',
      'IN', 'IA', 'KS', 'KY', 'LA',
      'ME', 'MD', 'MA', 'MI', 'MN',
      'MO', 'MS', 'MT', 'NE', 'NV',
      'NH', 'NH', 'NM', 'NY', 'NC',
      'ND', 'OH', 'OK', 'OR', 'PA',
      'RI', 'SC', 'SD', 'TN', 'TX',
      'UT', 'VT', 'VA', 'WA', 'WV',
      'WI', …

我目前正在研究Vuetify，尝试Vue.js使用HTML从v-select中调用方法。但是@change事件没有正确选择条件。

<v-layout row wrap>
    <v-flex xs12 sm4>
      <!-- DropDown Combo -->
      <v-select v-model="selected"
        :items='dropdown_tables'
        append-icon='fa-angle-down'
        label='Select'
        persistent-hint
        return-object
        single-line
        @change='RefreshGrid'
        target='#dropdown'>
        </v-select>
        <!-- <p> {{`${selected}`}} </p> // this code gives the selected combo text -->
    </v-flex>
   </v-layout>
</v-container>

我的Javascript函数

 methods: {
   RefreshGrid: function () {
   let cName;
   if (this.selected === 'Business Area') {
    cName = 'businessArea';
   } else if (this.selected === 'Council') {
     cName = 'council';
   }
   let obj = {
    vm: this,
    collectionName: cName,
    action: 'masterData/setMasterData',
    mutation: …

我正在尝试在 v-select 中设置多个文本项。目前这是我的 v-select 及其与一个 :item-text 的配合。但我需要显示两个字段。所以我正在检查文档并尝试使用插槽。

<v-select
            :disabled="isReadOnly()"
            v-show="!isHidden()"
            :label="getLabel()"
            :hint="field.description"
            :items="selectVal"


            :item-value="field.options.select.ValueField"
            :item-text="field.options.select.TextField"

            :multiple="isType(FieldType.ManyToMany)"
            :chips="isType(FieldType.ManyToMany)"

            v-model="fieldValue"
            :rules=rules()
            return-object
    >
    </v-select>

但是当我这样做时：

     <template slot="selection" slot-scope="data">
                {{ data.item.name }} - {{ data.item.description }}
            </template>
            <template slot="item" slot-scope="data">
                {{ data.item.name }} - {{ data.item.description }}
            </template>

v-select 的默认行为必须重新实现。（芯片，在多个选择上显示复选框......

还有另一种方法可以做到这一点吗？不复制默认行为并且有重复的代码来完成这个简单的任务？

提前致谢。对于初学者的问题感到抱歉。

我正在使用 Vuetify v-select 组件：https ://vuetifyjs.com/en/components/selects/

我想用这样的图像进行选择：

但我没有在文档中找到任何内容