Vuejs directive inside v-for loop dynamic expression

Question

I have a vuejs 1.x v-for loop over some elements that display some components that use a custom directive (for tinymce). The directive works when the expression can be parsed based on the root element, but since it is inside a loop, I need it to reference the index somehow.

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

Inside the tinymce init, the keyup event gets self.expression but it needs to be dynamic? from the questions array ..

Answer 1

You should be considering following from documentation:

1. passing these three arguments: el, binding, vnode in the bind function
2. binding.value will give you value passed which is question.value

So you need to make following changes:

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());
        });
      }
    })});
  },
  ...
  ...