vue.js使用过程遇到的问题

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)取到的就是该元素

猜你喜欢

转载自blog.csdn.net/qq_35615462/article/details/81192921