Question

我正在尝试使用redactor作为vuejs 2组件，但是我遇到了很多麻烦，因为一旦加载了redactor创建了一个新的div，所以我无法在该div上听一个keyup事件。请参阅下面的代码。

Vue组件

<template>
  <div>
    <textarea @keyup="internalValue" 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: ['value'],
    data () {
      return {
        internalValue: this.value
      }
    },
    mounted: function(){
      $(function() {
        // $( document ).ready(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').attr('v-model', 'questionDescription');
        // });
      });
    },
    watch: {
      internalValue(v){
        this.$emit($('.redactor-editor').html(), v);
      }
    }
};
</script>

注册组件

Vue.component('vueredactor', require('./components/redactor-qa.vue'));

初始化VUE

var App = new Vue({
        el: '#app',
        data: {
          questionDescription: null
        }
    });

HTML

<div id="app">
  <vueredactor v-model="questionDescription"></vueredactor>
</div>

Answer 1

关于新的div，你可以监听它上面的事件，但不能通过应用Vue属性。因为您位于组件内部，所以您可以使用jQuery查找元素，将侦听器附加到它们以及任何其他有意义的逻辑删除操作以在Vue和窗口小部件之间进行桥接。只需将自己局限于组件内的元素即可。

Vue为您提供$el成员（不要被美元符号欺骗，它不是jQuery对象）作为组件实例的根元素。我没有任何redactor的经验，所以我不能告诉你什么会起作用，但你可能有之类的

mounted: function(){
  $(function() {
      $(this.$vm).find('.question-create-editor').redactor({
        imageUpload:'/urlGoesHereBro/',
        plugins: ['video', 'imagemanager', 'counter', 'limiter'],
        buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
      });
      $(this.$vm).find('.new-redactor-div').keyup((e) => {
        this.$emit('change', e);
      });
  });
},

使用redactor作为vue组件

1 个答案: