1.在刚开始使用vue的时候,事件是用jquery写的,其中事件包含在vue的div中,当vue初始化以后,事件照常运行
var init=[{
id:1,
name: '成人票',
price: 100
}, {
id:2,
name: '儿童票',
price: 60
}, {
id:3,
name: '半价票',
price: 50
}];
var tabstr='';
var total='';
var jsn='';
var all = new Vue({
el: '#all',
data: {
tickets: init
}
});
app = new Vue({
el: '#app',
data: {
tickets: ''
}
});
$('.numbtn').children('#sub').click(function() {
tabstr='';
var inp = $(this).parent('div').find('input');
var num = parseInt($(this).parent('div').find('input').val());
num--;
if(num >= 0) {
inp.val(num);
} else {
inp.val(0);
}
tab();
})
但是当用ajax从后台取到数据,修改vue中的data的时候(all.tickets = “”),问题就出现了,div包含的事件全部不起作用了,查阅资料发现vue会重新绑定事件,解决办法,将事件写在vue的methods中。
2.vue获取点击的元素
<button type="button" id="sub" v-on:click="sub($event)">-</button>
sub: function(event) {
tabstr = '';
var inp = $(event.target).parent('div').find('input');
var num = parseInt($(event.target).parent('div').find('input').val());
num--;
if(num >= 0) {
inp.val(num);
} else {
inp.val(0);
}
this.tab();
}
html中入参写$event,$(event.target)取到的就是该元素