如何连接 v-autocomplete item-text vuetify 中的两个字段

Question

我正在寻找一种方法来连接 v-autocomplete item-text 字段中的两个字段，

这是我的代码：

            <ol>
              <li>
                  <v-autocomplete
                    placeholder="Search a person"
                    prepend-inner-icon="mdi-magnify"
                    chips
                    clearable
                    dense
                    v-model="counterpart1"
                    item-value="id"
                    item-text="first_value"
                    :items="enrolled1"
                  />
              </li>
            </ol>

我期待这样的事情：

            <ol>
              <li>
                  <v-autocomplete
                    placeholder="Search a person"
                    prepend-inner-icon="mdi-magnify"
                    chips
                    clearable
                    dense
                    v-model="counterpart1"
                    item-value="id"
                    item-text="first_value + second_value"
                    :items="enrolled1"
                  />
              </li>
            </ol>

我试过这个：

item-text="first_value + second_value"

还有这个：

:item-text="`${first_value}, ${second_value}`"

但是我得到了[object Object]。我发现这个相似但我认为我的情况有点不同，我无法理解如何以这种方式更改它。

任何帮助将不胜感激

Answer 1

使用函数渲染 item-text。

:item-text="getItemText"

然后，在您的 methods:

getItemText(item) {
    return `${item.first_value} ${item.second_value}`;
}

如何连接 v-autocomplete item-text vuetify 中的两个字段

How to concatenate two fields in v-autocomplete item-text vuetify

vue.js

vuetify.js