Vue 组件中的 jQuery 插件:无法将值传递给 prop [英] jQuery plugin in Vue component: Cannot pass value to prop
问题描述
我在 vue 组件中添加了 jquery redactor 插件.该插件运行良好，但我需要访问 html 以便我可以在 Vue 中看到它.
我已经尝试了所有我能想到的方法，方法，计算属性，但我找不到方法.特别棘手，因为Redactor在dom中添加了新的html，我需要从添加的html中获取数据.
目前我收到这个错误，this.$emit is not a function.我需要将 .redactor-editor 的 html 值放入 prop 中，以便它在 vue 数据中可用.var textContent 在控制台中正确打印出来，但我无法在 prop 中显示它.非常感谢任何帮助.
组件
<div><textarea class="form-control question-create-editor" id="question_description" placeholder="在这里添加所有细节——让图片上传工作"rows="3"><脚本>导出默认{道具:['redactorValue']，安装:功能(){$('#question-create-form .question-create-editor').redactor({imageUpload:'/urlGoesHereBro/',插件:['视频'，'图像管理器'，'计数器'，'限制器']，buttonHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']});},计算:{redactorValue:函数(){$('#question-create-form .redactor-editor').on('keyup', function(){var textContent = $('#question-create-form .redactor-editor').html();console.log( 'textContent = ' + textContent );this.$emit('redactorValue', textContent);});}}};
HTML
this.$emit is not a function 问题是因为 this 指向 窗口.
我还将 keyup 定义移动到 mounted 中.
出口默认{数据(){返回 {编辑器值:空}},安装:功能(){$('#question-create-form .question-create-editor').redactor({imageUpload:'/urlGoesHereBro/',插件:['视频'，'图像管理器'，'计数器'，'限制器']，buttonHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']});$('#question-create-form .redactor-editor').on('keyup', function(){this.redactorValue = $('#question-create-form .redactor-editor').html();}.bind(this));}};I have added the jquery redactor plugin in a vue component. The plugin is working fine but I need to access the html so I can see it in Vue.
I have tried everything I can think of, methods, computed properties but I can't find a way. It's particularly tricky because Redactor adds new html into the dom, and I need to get the data from the added html.
Currently I am getting this error, this.$emit is not a function. I need to get the html value of .redactor-editor into the prop so it will be available in the vue data. The var textContent prints out correctly in console but I can't get that to show in the prop. Any help is greatly appreciated.
Component
<template>
<div>
<textarea class="form-control question-create-editor" id="question_description" placeholder="Go wild with all the details here - make image upload work" rows="3">
</div>
</template>
<script>
export default {
props: ['redactorValue'],
mounted: function(){
$('#question-create-form .question-create-editor').redactor({
imageUpload:'/urlGoesHereBro/',
plugins: ['video', 'imagemanager', 'counter', 'limiter'],
buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
});
},
computed: {
redactorValue: function(){
$('#question-create-form .redactor-editor').on('keyup', function(){
var textContent = $('#question-create-form .redactor-editor').html();
console.log( 'textContent = ' + textContent );
this.$emit('redactorValue', textContent);
});
}
}
};
HTML
<vueredactor></vueredactor>
The this.$emit is not a function issue is because this is pointing to the window.
Also I moved the keyup definition into mounted.
export default {
data(){
return {
redactorValue: null
}
},
mounted: function(){
$('#question-create-form .question-create-editor').redactor({
imageUpload:'/urlGoesHereBro/',
plugins: ['video', 'imagemanager', 'counter', 'limiter'],
buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
});
$('#question-create-form .redactor-editor').on('keyup', function(){
this.redactorValue = $('#question-create-form .redactor-editor').html();
}.bind(this));
}
};
这篇关于Vue 组件中的 jQuery 插件:无法将值传递给 prop的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
