Vue组件中的jQuery插件:无法将值传递给prop

问题描述

我在vue组件中添加了jquery redactor插件.该插件可以正常工作，但是我需要访问html，以便可以在Vue中看到它.

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.

我已经尝试了所有我能想到的方法，计算属性，但是我找不到方法.这特别棘手，因为Redactor将新的html添加到dom中，而我需要从添加的html中获取数据.

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.

当前我收到此错误，this.$emit is not a function.我需要将.redactor-editor的html值添加到prop中，以便它可以在vue数据中使用. var textContent在控制台中可以正确打印出来，但是我无法在prop中显示出来.任何帮助，我们将不胜感激.

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.

组件

<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>

推荐答案

this.$emit is not a function问题是因为this指向window.

我也将keyup定义移到了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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！