Vuetify 3 中的 V-select 问题答案

【问题标题】：V-select issue in Vuetify 3Vuetify 3 中的 V-select 问题
【发布时间】：2022-10-01 14:41:47
【问题描述】：

我正在为我的项目使用 Vuetify 3.0.0-beta.0 ~（因为它是唯一支持 vue3 的版本），并且有一个有点奇怪的问题

我想实现与https://codepen.io/reijnemans/pen/vYNadMo?editors=1010 中描述的相同的东西，其中涉及 v-select，所以我需要使用 Vuetify

复制sn-p

          <v-select
            :items=\"items\"
            label=\"Standard\"
          >
            <template v-slot:selection=\"{ item, index }\">
              <img :src=\"item.image\">{{ item.name }}</template>
            </template>
            <template v-slot:item=\"{ item }\">
              <img :src=\"item.image\">{{ item.name }}</template>
          </v-select>

我的组件：


<template>
    <div class=\"resourceSelectors\">
    
            <v-col cols=\"10\" lg=\"4\" class=\"mx-auto\">

                  <div class=\"text-center\">
                    <h2 class=\"indigo--text\" style=\"margin-bottom: 30px\">Some Test H2</h2>
                  </div>

                <v-col class=\"d-flex\" cols=\"12\" sm=\"6\">
                    <v-select
                        :items=\"items\"
                        label=\"Standard\">
                        <template v-slot:selection=\"{ item }\">
                        <img :src=\"item.image\">{{ item.name }}
                        </template>

                        <template v-slot:item=\"{ item }\">
                        <img :src=\"item.image\">{{ item.name }}
                        </template>

                    </v-select>
                </v-col>
          </v-col>
  </div>

</template>

<script>

import { mapState } from \"vuex\";

/* eslint-disable */

export default {

  name: \"testComponent\",
  data() {
    return {
      // hardware Configuration Validation Rules

      items: [
      { name: \'Foo\', image: \'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG\'},
      { name: \'Bar\', image: \'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG\'},
      { name: \'Hoo\', image: \'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG\'},
      { name: \'Coo\', image: \'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG\'}],
}
}}

当我尝试运行上述组件时，我总是收到这个奇怪的错误 Failed setting prop \"type\" on <select>: value text is invalid. TypeError: Cannot set property type of #<HTMLSelectElement> which has only a getter，

以前有没有人遇到过类似的问题？

标签： vue.js

【解决方案1】：

我找不到正确的解决方案，但我只想分享我对作用域插槽所做的事情。我认为我们应该使用item.raw 来访问name 和image。下一个问题是如何让它可以点击触发我还不知道的选择事件:(

const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()

const app = createApp({
  data() {
    return {
      value: null,
      items: [
        {
            name: 'Foo',
            image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'
        },
        {
            name: 'Bar',
            image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'
        },
        {
            name: 'Hoo',
            image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'
        },
        {
            name: 'Coo',
            image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'
        }
      ]
    }
  }
});

app.use(vuetify).mount('#app');

<link href="https://cdn.jsdelivr.net/npm/vuetify@3.0.0-beta.9/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.0-beta.9/dist/vuetify.min.js"></script>

<div id="app">
  <div class="resourceSelectors">
     <v-col cols="10" lg="4" class="mx-auto">
        <div class="text-center">
           <h2 class="indigo--text" style="margin-bottom: 30px">Some Test H2</h2>
        </div>
        <v-col class="d-flex" cols="12" sm="6">
           <v-select
            v-model="value"
            :items="items"
            item-title="name"
            item-value="name"
            label="Standard">
              <template v-slot:item="{item}">
              <v-list-item
                :prepend-avatar="item.raw.image"
                :title="item.raw.name"
              />
            </template>
         </v-select>
        </v-col>
     </v-col>
  </div>
</div>

【讨论】：