jQuery has outdated data after vue changes-CodePudding

I'm in the middle of migration between Jquery and Vue.js 3.

In this case, vue updated the DOM and Jquery still has outdated data.

Question: How can I force JQuery for having the new results just like vue and js (because document.getElementById('modelSelect'); also return the updated data like vue)?

DOM after vue changes

Object retrieved by JQuery (old data)

template

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

vue changes

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

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

UPDATE:

I have a similar implementation working just fine with the difference that the array used in v-for belongs to a ParentComponent instead of belonging to the same component as v-for.

CodePudding user response：

The best way I found to solve this problem was actually very simple.

I just had to destroy the chosen element before initializing again.

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

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

This issue can also be fixed by wrapping chosen element in a vue container.

The Jquery element still has outdated data but this way the chosen is created with the new data instead.