Jquery работает внутри функции, но только для одного из вызовов, другой я должен вручную выполнить в консоли Chrome

Question

Я пытаюсь сбросить «выбранный» пункт после того, как пользователь делает выбор.Это вызов функции Vue ниже, tS ().Первый вызов $('#sel1').prop('selectedIndex',0); работает только в том случае, если я выполняю его в консоли, однако второй $('#current-schedule-holder').text('Current : '+scheduleToTime(msg)); работает нормально, это означает, что jquery работает.Также мой console.log($('#sel1')) показывает, что элемент из первого вызова, который не работает, уже находится в DOM, когда функция выполняется.

tS: function(msg){
   $('#sel1').prop('selectedIndex',0);
   console.log($('#sel1'))
   $('#current-schedule-holder').text('Current : '+scheduleToTime(msg));
   toggleScheduler(this.query, msg);
},

Answer 1

Я бы не советовал смешивать jQuery и Vue.Vue использует виртуальный DOM, а jQuery - нет.Вероятно, происходит то, что при запуске функции tS она корректно обновляет DOM, но затем Vue отменяет эти изменения на основе информации, которую она имеет в своем виртуальном DOM.

См. https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/ для получения инструкций о том, как заставить jQuery работать с Vue.Вам нужно будет обернуть свои функции jQuery в компонент Vue, что хорошо, если вам нужны сложные функции в плагине jQuery, но для таких базовых манипуляций с DOM, как этот, гораздо проще придерживаться этого внутри Vue.