Question

当我使用我尝试过的vue select组件之一时，会发生一些奇怪的事情。应该在列表值出现的地方获取插槽名称。在示例中，这将更加清楚。

我尝试使用 vue-multiselect，vue-select和vue-cool-select ，我得出的结论是这不是库问题，而是vue或我的问题配置。

此示例显示了vue-multiselect，但到目前为止，我已经使用过的每个库。这是vue-multiselect文档本身提供的最基本的示例。

<template>
    <div>
        <multiselect
            v-model="value"
            :options="options"
            :searchable="false"
            :close-on-select="false"
            :show-labels="false"
            placeholder="Pick a value"
        ></multiselect>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value: null,
                options: ['Select option', 'options', 'selected', 'mulitple']
            }
        },
    }
</script>

这是我得到的： https://i.imgur.com/mJjs6lU.png

有人知道为什么会这样吗？

谢谢！

Answer 1

您的代码与此code here.

应该可以正常工作

<template>
  <div>
        <multiselect
            v-model="value"
            :options="options"
            :searchable="false"
            :close-on-select="false"
            :show-labels="false"
            placeholder="Pick a value"
        ></multiselect>
    </div>
</template>

<script>
import Multiselect from "vue-multiselect";

export default {
  name: "App",
  components: {
    Multiselect
  },
  data() {
      return {
          value: null,
          options: ['Select option', 'options', 'selected', 'mulitple']
      }
  },
};
</script>

Answer 2

因此，我在项目中有一个函数来处理称为var close = document.querySelector(".close"); var buttons = document.querySelectorAll(".modal-options"); close.addEventListener("click", (event) => { buttons.forEach(function(button) { button.removeAttr('checked'); }); })的翻译，该翻译也定义为_t()。因此，Vue.prototype._t引用了Vue.prototype._t()函数。

请记住，永远不要使用名为renderSlot()的函数来制作Vue原型。在尝试注释几乎每一行代码之前，我损失了将近4小时。

Vue广告位呈现名称而不是内容

2 个答案: