Question

我在一些元素上有一个vuejs 1.x v-for循环，它显示了一些使用自定义指令的组件（用于tinymce）。当表达式可以根据根元素进行解析时，该指令有效，但由于它在循环内，我需要它以某种方式引用索引。

 // tinymce directive
  Vue.directive('tinymce-editor',{ 
    twoWay: true,
    bind: function() {
      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() {
            // ************
            // self.expression here needs to be questions[idx].value 
            // not question.value
            // ************
            self.vm.$set(self.expression, tinymce.get(self.el.id).getContent());
          });
        }
      })});
    },
    update: function(newVal, oldVal) {
      // set val and trigger event      
        $(this.el).val(newVal).trigger('keyup');
      }
      
    }
  
  })

<div class="form-group" v-show="questions.length" v-for="question in questions">
        
            <textarea 
                id="textarea-{{question.id}}"  
                v-tinymce-editor="question.value"           
            >{{question.value}}</textarea>
        </div>       
  </div

在tinymce init中，keyup事件获得self.expression但它需要是动态的吗？来自问题数组..

Answer 1

您应该考虑从documentation开始关注：

在绑定函数

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循环动态表达式中的Vuejs指令

1 个答案: