jQuery vue 更改后数据已过期

Question

我正在 Jquery 和 Vue.js 之间迁移 3.

在这种情况下，vue 更新了 DOM 并且 Jquery 仍然有过时的数据。

问题：如何强制JQuery像vue和js一样获得新结果（因为document.getElementById('modelSelect');也return像vue一样更新数据）？

DOM vue改动后

JQuery 检索到的对象（旧数据）

模板

<select
    id="modelSelect"
    class="form-control"
    v-model="model"
>
    <option></option>
    <option
        v-for="(child, childIndex) in models"
        :key="childIndex"
        :value="child.id"
    >
        {{ child.name }}
    </option>
</select>

vue 变化

partAPI.getModels(newBrandId).then((result) => {
  models.value = result;

  nextTick(() => {
      let select = $("#modelSelect");
      select.chosen({ allow_single_deselect: true, width: "100%" });
  });
});

更新：

我有一个类似的实现，工作正常，不同之处在于 v-for 中使用的数组属于 ParentComponent 而不是与 v-for 属于同一组件。

Answer 1

我找到的解决这个问题的最佳方法实际上非常简单。

我只需要在再次初始化之前销毁所选元素。

$('#modelSelect').chosen("destroy");
partAPI.getModels(newBrandId).then((result) => {
  models.value = result;

  nextTick(() => {
    $("#modelSelect").chosen({ allow_single_deselect: true, width: "100%" });
  });
});

这个问题也可以通过将所选元素包装在 vue 容器中来解决。

Jquery 元素仍然有过时的数据，但通过这种方式，选择的是用新数据创建的。

jQuery vue 更改后数据已过期

jQuery has outdated data after vue changes

jquery

vue.js