Vue 未检测到使用 JQuery 或 JS 所做的更改
Vue is not detecting changes made with JQuery or JS
我做了一支笔让你明白我在说什么:https://codepen.io/cristian-ayala/pen/rNOWwOO?editors=1111
输入和段落都绑定到来自 Vue (anioPicker) 的值,但 1 秒后我用 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>
Vue 使用它自己的 VDom(虚拟 DOM)来管理它的数据和组件。您正在修改基础 DOM 实例,它不会将这些更改向上传播到 VDom。
您必须修改 vue
实例中的值。
您可以通过在您的案例中直接改变根 vm
实例的值来做到这一点:
vm.anioPicker = 2012
我做了一支笔让你明白我在说什么:https://codepen.io/cristian-ayala/pen/rNOWwOO?editors=1111
输入和段落都绑定到来自 Vue (anioPicker) 的值,但 1 秒后我用 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>
Vue 使用它自己的 VDom(虚拟 DOM)来管理它的数据和组件。您正在修改基础 DOM 实例,它不会将这些更改向上传播到 VDom。
您必须修改 vue
实例中的值。
您可以通过在您的案例中直接改变根 vm
实例的值来做到这一点:
vm.anioPicker = 2012