Vuejs2 在Select2中为VueJS选择多个选项。有时返回选中的空白

在此处

选择2.vue

comp source:

此处

itemdail.vue

页面来源：

我在VueJS中使用select2，这是我根据VueJS文档和其他资源创建的。一切似乎都很好。但是，有时

标记

或

所选

选择不正确，在调试后，我发现有时

未定义

，

[]

或

'

（空）

我高度怀疑这是因为异步。这里是我想要归档的内容：我想要显示支持一个项目的所有单元

AJAX:get单元的api

AJAX：获取项目详细信息的api。数据项，包括支持此项的当前单位

加载基于

项选择2个单位。单位

和

单位

。有时可以，但有时不行 下面是我的一些解释

// Calling item detail(ASYNC)
// api/item/detail/:id
var item = getItemDetail()

// Calling ajax units(ASYNC)
// api/category?group_by=units
var units = getUnits();

Hopely将安排select2

type=tags

将根据下拉菜单中的项目单位（v型）和可用单位正确呈现

在以下情况下，它似乎无法正确渲染：

选择2不带选项和值的渲染（对于

项和
单元，ajax未完成）

AJAX项目先完成

AJAX单元最后完成

当我调试时，似乎选择了2

updated

v-model和空值，因为选择项中没有与v-model值匹配的内容。例如：

item.units = [1,2,3];
units = []; // Because not ready yet

$(this.$el).val(); // Return empty array or something

我试着纠正顺序如下：

选择2不带选项和值的渲染（对于

项和
单元，ajax未完成）

AJAX单元最后完成，等待完成并转至步骤3

AJAX项目先完成

这工作做得很好

---

问题是：是否可以在不考虑ajax顺序或等待先投诉的情况下运行async并完美呈现select2？我认为可以通过两种方法解决这个问题

您可以将该值存储在select2包装器组件的单独属性中，当选项更改时，请确保将您的值重新应用于select2。这样，即使select2将值设置为空，也会在ajax完成加载后重置原始值

当值更改并选择“2未加载任何选项”时，创建一个选项，使其不会将值设置为空。当您的选项完成加载后，它将用ajax加载的项目替换select2中的所有项目

//选项2：这将进入Watch for value属性中
//请注意，这适用于单个选择，对于标记，其思想是相同的
//但是您必须创建所有标记。
const select=$（this.$refs.select2）；
if（select.find（`option[value=“${value}”]`）.length==0）{
select.append(
$("")
.val（值）
.text（此.displayText | |“”）
);
}

---

我在工作中使用了选项2（抱歉，无法共享完整的代码），它起了作用。如果您对以上截图不清楚，我可以尝试提供更多细节。

我知道了。我也阅读了select2文档，但还没有尝试过我对computed属性做了类似的事情（看看我的select2代码）。但有些方法不能正常工作。当

这个.value

未定义时，似乎发生了一些不正确的事情。