javascript - vue.js 的 <template> 语法不起作用

Question

我想使用this我的基于 vue.js 的网络项目的下拉菜单。 到目前为止，vue.js 的一切都运行良好。

不幸的是，在下面的示例中，模板部分(我猜)没有被渲染。控制台中没有错误消息，我不知道需要做什么才能使用 <template>正确地在我的网络项目中。

<div>
  <label class="typo__label">Simple select / dropdown</label>
  <multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Pick some" label="name" track-by="name" :preselect-first="true">
    <template slot="selection" slot-scope="{ values, search, isOpen }"><span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">{{ values.length }} options selected</span></template>
  </multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

任何提示都将受到高度赞赏!

Answer 1

在链接中，他这样说

<template slot="tag" slot-scope="props"><Your code></template>

因此将您的代码更新为

<template slot="selection" slot-scope="{ values, search, isOpen }">
    <div>
    <label class="typo__label">Simple select / dropdown</label>
    <multiselect v-model="value" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false" :preserve-search="true" placeholder="Pick some" label="name" track-by="name" :preselect-first="true">
        <span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">{{ values.length }} options selected</span>
    </multiselect>
    <pre class="language-json"><code>{{ value }}</code></pre>
    </div>
</template>

因为 Vue 读取 <template>标签，所以不要在代码中使用它