Complemento jQuery en el componente Vue: no se puede pasar el valor al accesorio
He agregado el complemento jquery redactor en un componente vue. El complemento funciona bien, pero necesito acceder al html para poder verlo en Vue.
He intentado todo lo que puedo pensar, métodos, propiedades calculadas, pero no puedo encontrar una manera. Es particularmente complicado porque Redactor agrega un nuevo html al dom, y necesito obtener los datos del html agregado.
Actualmente recibo este error,this.$emit is not a function
. Necesito obtener el valor html de.redactor-editor
en el accesorio para que esté disponible en los datos vue. El vartextContent
se imprime correctamente en la consola, pero no puedo mostrar eso en elprop
. Cualquier ayuda es muy apreciada.
Componente
<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>