<template> syntax of vue.js does not work

Question

I want to use this dropdown menue for my webproject based on vue.js. Everything with vue.js worked fine so far.

Unfortunately in the following example the template part does (i guess) not get rendered. There is no error message in the console and i don't know what i need to do to use <template> properly in my webproject.

<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>

Any hint is highly appreciated!

Answer 1

In the link, he says that

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

so update your code to

<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>

because Vue read from <template> tag so don't use it inside codes

Answer 2

Since the template tag is within the mulitselect, I'd suggest you check the documentation for vue-multiselect and check out their slot scopes. This should help https://vue-multiselect.js.org/#sub-getting-started