Vue.js v-for循环动态表达式中的Vuejs指令
我在一些元素上有一个vuejs 1.x v-for循环,这些元素显示一些使用自定义指令(对于tinymce)的组件。当可以基于根元素解析表达式时,该指令起作用,但由于它位于循环中,我需要它以某种方式引用索引Vue.js v-for循环动态表达式中的Vuejs指令,vue.js,Vue.js,我在一些元素上有一个vuejs 1.x v-for循环,这些元素显示一些使用自定义指令(对于tinymce)的组件。当可以基于根元素解析表达式时,该指令起作用,但由于它位于循环中,我需要它以某种方式引用索引 //tinymce指令 指令('tinymce-editor',{ 双向:对, 绑定:函数(){ var self=这个; //必需原因textarea尚未在DOM中 $(document).on('click','#'+self.el.id,function()){ tinymce.in
//tinymce指令
指令('tinymce-editor',{
双向:对,
绑定:函数(){
var self=这个;
//必需原因textarea尚未在DOM中
$(document).on('click','#'+self.el.id,function()){
tinymce.init({
梅努巴:错,
浏览器拼写检查:true,
插件:“链接图像预览字数表”,
选择器:“#”+self.el.id,
设置:函数(编辑器){
//init tinymce
on('init',function(){
tinymce.get(self.el.id).setContent(self.value);
});
//键入keyup事件时
on('keyup',function()){
// ************
//这里的self.expression需要是疑问[idx].value
//没有问题,没有价值
// ************
self.vm.$set(self.expression,tinymce.get(self.el.id).getContent());
});
}
})});
},
更新:函数(newVal,oldVal){
//设置val和触发器事件
$(this.el).val(newVal.trigger('keyup');
}
}
})
{{question.value}}
您应该从以下方面考虑:
在bind函数中传递这三个参数:el、binding、vnode
binding.value
将为您提供传递的值,即question.value
因此,您需要进行以下更改:
Vue.directive('tinymce-editor',{
twoWay: true,
bind: function(el, binding, vnode) {
var self = this;
// required cause textarea not in DOM yet
$(document).on('click', '#'+self.el.id, function(){
tinymce.init({
menubar: false,
browser_spellcheck: true,
plugins: "link image preview wordcount table",
selector: "#" + self.el.id,
setup: function(editor) {
// init tinymce
editor.on('init', function() {
tinymce.get(self.el.id).setContent(self.value);
});
// when typing keyup event
editor.on('keyup', function() {
// ************
// binding.value will be questions[idx].value
// ************
self.vm.$set(binding.value, tinymce.get(self.el.id).getContent());
});
}
})});
},
...
...
如果需要问题的索引,可以执行以下操作:v-for=“问题,我在问题中”
其中i
是数组中问题的索引