Vue не обнаруживает изменения, сделанные с помощью JQuery или JS - PullRequest
Новая
       1

Vue не обнаруживает изменения, сделанные с помощью JQuery или JS

0 голосов
/ 21 апреля 2020

Я сделал ручку, чтобы вы могли видеть, о чем я говорю: https://codepen.io/cristian-ayala/pen/rNOWwOO?editors=1111

И вход, и абзац привязаны к значению от Vue ( anioPicker) но после 1 се c я изменяю значение с помощью jquery, но vue не обнаруживает изменения или, возможно, я не регистрирую событие правильно. Параграф по-прежнему показывает 2020, даже когда я уже изменяю его, но в vue экземпляр по-прежнему равен 2020. Vue отражает изменения, только если я ввожу или удаляю что-то. Можете ли вы сказать мне, что я делаю неправильно?

Спасибо за любую помощь. 

var vm = new Vue({
    el: '#appRESBAR',
    data: {
        anioPicker: 2020,
    },
  methods:{
    
  },
  watch: {
        anioPicker: function(value) {
            console.log("watched property",value);
        }
    }
});


$(window).on("load", function(e) {
   setTimeout(function() {
        $("#anioDate").val(2012);
        console.log(document.querySelector('.yearpicker').value)
    }, 1000);
});
.datePick {
    display: inline-block;
    background: #828282;
    transform: skew(-10deg);
    padding-left: 10px;
    font-weight: 500;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-right: 10px;
    margin-top: 0.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.selectedDate {
    background-color: #224abed6;
}

.styleInput{
    margin: 0px;
    width: 38px;
    color: white;
    background: #4466c8;
    border: none;
    padding: 0;
    outline: none;
    border-radius: 0;
}
<div id="appRESBAR" style="text-align: center;">
  <div class="datePick selectedDate">
    <input type="text" id="anioDate" class="yearpicker styleInput" style="margin: 0;" v-model="anioPicker"></input>
  </div>
<p>La fecha es: {{ anioPicker }}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

1 Ответ

1 голос
/ 21 апреля 2020

Vue использует собственный VDom (Virtual DOM) для управления своими данными и компонентами. Вы модифицируете базовый экземпляр DOM, который не распространяет эти изменения вверх на VDom.

Вместо этого вы должны изменить значение в экземпляре vue.

Это можно сделать с помощью непосредственно изменяя значение экземпляра root vm в вашем случае: 

vm.anioPicker = 2012
...