Question

我是Vue的新手，如果这是一个简单的问题，请原谅我。我有一个页面，在该页面中，我动态呈现选择下拉列表，并根据称为 filteredWidgets 的计算属性动态填充其选项，该属性取决于用户在其他下拉列表中所做的选择。标记如下：

<div v-if="filteredWidgets.length > 0">
 <select id="widgetSelect" name="widgets">
      <option value="">Select up to two Widgets</option>
      <option v-for="widget in filteredWidgets" v-bind:value='widget.id'>
         @{{widget.name}}
      </option>
   </select>
</div>

从Select2文档中可以看出，这是将select / option元素转换为Select2多选元素的方式：

$(document).ready(function() {
    $('#widgetSelect').select2();
});

我可以将其用于具有非动态呈现的select下拉列表的页面。显然，这不适用于Vue，因为下拉列表是动态呈现的，并且基于计算的属性selectedWidgets。我需要找到一种方法来使select2在此下拉菜单出现/更改时起作用。这是计算属性方法filteredWidgets（）：

filteredWidgets() {
  var filteredWidgets = this.availableWidgets.filter(widget => {
     return widget.color == selectedColor && widget.size == selectedSize;
  });

  return filteredWidgets;
}

虽然默认的select下拉列表可以按照我的意愿进行渲染，并且包含我想要的过滤后的小部件，但我需要弄清楚如何在Vue渲染后立即将select2（）应用于widgetSelect下拉列表。正确的方法是什么？

Answer 1

on-change更改watch，然后致电filteredWidgets。

.select2()

您需要在watch: { async filteredWidgets() { await this.$nextTick() // wait for DOM to update $(this.$refs.widgetSelect).select2() } }上添加ref，以便可以直接使用<select>访问元素，而不必执行类似this.$refs.widgetSelect的操作。除非您将this.$el.querySelector('#widgetSelect')属性用于其他用途，否则不再需要。

id

获取动态呈现的Vue.js下拉列表以与Select2库一起使用

1 个答案: