vue.js 的 <template> 语法不起作用答案

【问题标题】：<template> syntax of vue.js does not workvue.js 的 <template> 语法不起作用
【发布时间】：2018-12-01 16:13:58
【问题描述】：

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

不幸的是，在下面的示例中，模板部分（我猜）没有被渲染。控制台中没有错误消息，我不知道我需要做什么才能在我的 web 项目中正确使用<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>

非常感谢任何提示！

【问题讨论】：

标签： javascript html templates vue.js drop-down-menu

【解决方案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> 标签读取的，所以不要在代码中使用它

【讨论】：

实际上，如果我这样放置 html，则之间的任何内容都不会被渲染。我在我的 index.html 中使用它。

【解决方案2】：

由于模板标签在 mulitselect 中，我建议您查看 vue-multiselect 的文档并查看它们的插槽范围。这应该有帮助 https://vue-multiselect.js.org/#sub-getting-started

【讨论】：