Vue-Multiselect显示对象而不是“名称”字段

Question

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

我可以（希望）对下面的此{{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>