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

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 文档中，它指出这是将选择/选项元素转换为 Select2 多选元素的方式：

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

我可以让它适用于具有非动态呈现的选择下拉列表的页面。显然，这不适用于 Vue，因为下拉列表是动态呈现的，并且它基于计算属性 selectedWidgets。我需要找到一种方法让 select2 在此下拉列表出现/更改时工作。这是计算的属性方法filteredWidgets()：

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

  return filteredWidgets;
}

虽然默认选择下拉菜单按照我的意愿呈现并包含我想要的过滤小部件，但我需要弄清楚如何在 Vue 呈现后立即将 select2() 应用于 widgetSelect 下拉菜单。这样做的正确方法是什么？

Answer 1

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 attr 不再需要，除非您将其用于其他用途。

<select ref="widgetSelect" name="widgets">