Question

我想在基于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>

任何提示都值得赞赏！

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>标记中读取，所以请勿在代码内使用它

Answer 2

由于template标记位于mulitselect中，因此建议您查看vue-multiselect的文档并查看其插槽范围。这应该有帮助 https://vue-multiselect.js.org/#sub-getting-started

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

2 个答案: