vue.js - v-for循环动态表达式中的Vuejs指令

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 :

1. 在绑定(bind)函数中传递这三个参数:el、binding、vnode
2. 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());
        });
      }
    })});
  },
  ...
  ...