vue.js 验证自动完成显示[对象对象]

xghobddn 于 2022-12-27 发布在 Vue.js

关注(0)|答案(4)|浏览(119)

我是vue 3的新手。我正在尝试为我的项目使用vuetify自动完成功能。我已经查阅了vuetify的官方文档。自动完成显示[对象对象]。提前感谢。

<script>
    import { Form, Field } from 'vee-validate';

    export default {
        components: {
            Form,
            Field,
        },
        setup(props) {
            
        },
        data() {
            return {
                add: {
                    id: 1,
                },
                states: [
                    { name: 'Florida', id: 1 },
                    { name: 'Georgia', id: 2 },
                    { name: 'Nebraska', id: 3 },
                    { name: 'California', id: 4 },
                    { name: 'New York', id: 5 },
                ],
            };
        },
        methods: {
            
            },

        
    };
</script>
<template>
<v-row>
    <v-autocomplete
    v-model="add.id"
    :items="states"
    item-text="name"
    item-value="id"
    chips
    deletable-chips
    filled
></v-autocomplete>
</v-row>
</template>

如何显示状态名称而不是[object object]

vue.js

来源：https://stackoverflow.com/questions/74906029/vuetify-autocomplete-showing-object-object

4条答案

按热度按时间

1tu0hz3e1#

使用:items="states.map(x=> x.name)"你需要使用一个字符串数组。

赞(0）回复(0）举报 2022-12-27

8i9zcol22#

如果你用的是Vuetify3，你应该使用“项目标题”而不是“项目文本”。而且我认为Vuetify2.6与Vue3不兼容。
如果这对你有效，请给予反馈。

赞(0）回复(0）举报 2022-12-27

amrnrhlw3#

在v中添加return-object-自动完成

<v-autocomplete
    v-model="add.id"
    :items="states"
    item-text="name"
    item-value="id"
    chips
    deletable-chips
    filled
    return-object
></v-autocomplete>

赞(0）回复(0）举报 2022-12-27

avwztpqn4#

首先，您提到了Vuetify的引用URL错误（或者您使用了错误的版本），因为Vuetify 2与Vue 3不兼容，所以请使用Vuetify 3进行开发。
第二，如果你不想选择多个项目（因为你没有使用multiple prop ），那么使用chips prop 似乎不值得。但是，如果你想使用它，首先修复两个语法错误-

使用closable-chips代替deletable-chips（这是Vuetify 2语法）。
使用variant="filled"代替filled（这也是Vuetify 2语法）。
现在，自动完成显示object object的原因是您正在使用属于Vuetify 2的item-text。相反，您应该使用item-title，该问题将得到修复。

以下是使用item-text和item-title时的输出工作演示-

<!DOCTYPE html>
<html>
  <head>
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css"
      rel="stylesheet"
      />
    <link
      href="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.css"
      rel="stylesheet"
      />
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.5/dist/vuetify.min.js"></script>
    <script type="text/x-template" id="app-template">
      <v-app>
        <v-card flat>
          <v-card-text>
            <v-row no-gutters>
              <v-col>
                <h3 class="my-2">When using "item-text"</h3>
                <v-autocomplete
                  v-model="add.id"
                  :items="states"
                  item-text="name"
                  item-value="id"
                  variant="filled"
                  chips
                  closable-chips
                  ></v-autocomplete>
              </v-col>
              <v-col class="ms-3">
                <h3 class="my-2">When using "item-title"</h3>
                <v-autocomplete
                  v-model="add.id"
                  :items="states"
                  item-title="name"
                  item-value="id"
                  variant="filled"
                  chips
                  closable-chips
                  ></v-autocomplete>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-app>
    </script>
    <script>
      const { createApp } = Vue;
      const { createVuetify } = Vuetify;
      
      const vuetify = createVuetify();
      
      const app = createApp({
        template: "#app-template",
        data() {
            return {
                add: {
                    id: 1,
                },
                states: [
                    { name: 'Florida', id: 1 },
                    { name: 'Georgia', id: 2 },
                    { name: 'Nebraska', id: 3 },
                    { name: 'California', id: 4 },
                    { name: 'New York', id: 5 },
                ],
            };
        },
      })
      .use(vuetify)
      .mount("#app");
    </script>
  </body>
</html>

赞(0）回复(0）举报 2022-12-27

我来回答

vue.js 验证自动完成显示[对象对象]

4条答案

相关问题

热门标签

最新问答