<template> синтаксис vue.js не работает

Question

Я хочу использовать это раскрывающееся меню для моего веб-проекта на основе 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  }}

Любая подсказка высоко ценится!

Answer 1

Поскольку тег шаблона находится в мультиселекте, я бы посоветовал вам проверить документацию для vue-multiselect и проверить их области слотов.Это должно помочь https://vue -multiselect.js.org / # sub-Getting-Start

Answer 2

В ссылке он говорит, что

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

, потому что Vue читается из *Тег 1011 *, поэтому не используйте его внутри кодов