vue中动态添加节点和动态绑定事件
需求:在vue模块中需要动态append一段dom节点代码,同时代码里面有@click等绑定事件,但是绑定事件无效原因:vue开发的代码是需要挂载编译后,再渲染成html代码的,直接append进去不认识vue的语法解决方法一:先手动挂载需要添加的节点,再追加到代码里。参考以下代码createMapAuthSetting: function () {var app = ...
需求:在vue模块中需要动态append一段dom节点代码,同时代码里面有@click等绑定事件,但是绑定事件无效
原因:vue开发的代码是需要挂载编译后,再渲染成html代码的,直接append进去不认识vue的语法
解决方法一:先手动挂载需要添加的节点,再追加到代码里。参考以下代码
createMapAuthSetting: function () {
var app = Vue.extend({
data: function () {
return {
openMask: true
};
},
methods: {
cancelMap: function () {
this.openMask = false;
jm.cookie("isAuthMap", null);
MallHelper.ing("需要访问位置才能规划路线");
},
accessMap: function () {
this.openMask = false;
jm.cookie("isAuthMap", true);
}
},
template:
'<div class="map_mask" v-if="openMask">' +
'<div class="map_container">' +
'<div class="map_img"></div>' +
'<div class="title">商家助手想要访问您的地理位置</div>' +
'<div class="message">您有同城配送订单,提供您的位置, 我们将为您规划更精确的路线。</div>' +
'<div class="btn_container">' +
'<div class="not_allow not_allow_font" @click="cancelMap()">不允许</div>' +
'<div class="allow allow_font" @click="accessMap()">好</div>' +
'</div>' +
'</div>' +
'</div>'
});
var mapComponent = new app().$mount(); //手动挂载
$("body").append(mapComponent.$el); //追加到body里,这时候的代码已编译好
解决方法二:可以不用vue语法@click来绑定事件,用jquery语法绑定
$(".btn_container").on("click", ".not_allow ", function () {});
更多推荐
所有评论(0)