Vue-Multiselect 显示对象而不是 "name" 字段

Question

我想知道如何更改此 link (https://vue-multiselect.js.org/#sub-tagging) 中显示的 vue-multiselect 示例，以便下方显示的数组仅显示以逗号分隔的名称列表。您可以在图像中看到，我选择了 Javascript 和 Open Source...并且在它下方显示了两者的整个对象。我只想显示用逗号分隔的 2 个名称。任何帮助将不胜感激...

我可以（希望）对下面的这个 {{ value }} 调用做一个简单的改变来完成这个吗？更改为 {{ Value.name }} 等不起作用。

<div>
  <label class="typo__label">Tagging</label>
  <multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="options" :multiple="true" :taggable="true" @tag="addTag"></multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

Answer 1

一种方法是在绑定中使用 javascript 进行转换：

<pre class="language-json"><code>{{ value.map(v => v.name).join(', ')  }}</code></pre>

Vue-Multiselect 显示对象而不是 "name" 字段

Vue-Multiselect displaying object instead of "name" field

ruby-on-rails

vue.js

vue-component

vuex

vue-multiselect