关于vue中用createElement新创建的元素绑定指令无效的问题

举例,以下的插入写法对于v-show这个指令来说似乎是无效的,isShow的变化不会让view变化,数据没有双向绑定了,所以,如果是新创建的元素,该如何绑定有效的指令呢?

 var newXX = document.createElementdiv; newXX.innerHTML = "<span v-show=isShow></span>" xx.appendChildnewXX

创建 DOM 元素之后再创建 Vue 实例,指定 el 包含生成的元素。

不知道你是怎么做的,我是这么做的

1.首先你的那个innerHTML里面的东西我放在一个单独的.vue文件里;
2.然后在js文件里面import进来,通过Vue.extend和new创建一个实例;
3.在append后,在Vue.nextTick回调里完成isShow的改变

我的Alert和Comfirm组件部分代码:
Box.vue:

<template> <transition name="fade"> <div class="ui-alert" v-if="visible"> <div class="ui-msg-box"> <div class="ui-title" v-text="title">提示</div> <div class="ui-msg" v-text="message"></div> <div class="ui-buttons"> <a class="btn" href="javascript:;" @click="onOk">确认</a> <a v-if="isConfirm" class="btn" href="javascript:;" @click="onCancel">取消</a> </div> </div> <div class="ui-mask"></div> </div> </transition>
</template>
<script type="text/javascript"> export default { props: { title: String, message : String }, data { return { isConfirm:true, visible: false, onOk:null, onCancel:null }; }, methods: { onOk { this.onOk && this.onOk; }, onCancel { this.onCancel && this.onCancel; } } }
</script>

Box.js:

import Vue from "vue"; const AlertVue = Vue.extendrequire./box.vue; let Message = options = {} => { let title = options.title || "提示", isConfirm = options.isConfirm === undefined || options.isConfirm===false ? false : true, message = typeof options === string ? options : options.message; return new Promiseresolve, reject => { let ins = new AlertVue{ el : document.createElement"div" }; ins.message = message; ins.title = title; ins.isConfirm=isConfirm; ins.onOk = => { ins.visible = false; resolvetrue; } ins.onCancel = => { ins.visible = false; resolvefalse; } document.body.appendChildins.$el; Vue.nextTick => { ins.visible = true; }; };
} let alert = options = {} => { let title = options.title || "提示"; let message = typeof options === string ? options : options.message; return new MessageObject.assign{ isConfirm:false }, { title, message };
} let confirm = options = {} => { let title = options.title || "提示"; let message = typeof options === string ? options : options.message; return new MessageObject.assign{ isConfirm:true }, { title, message };
}
export default alert;
export {confirm};

发表评论

电子邮件地址不会被公开。 必填项已用*标注