需求:在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 () {});

Logo

前往低代码交流专区

更多推荐