添加事件監聽器在VueJS 2

我想添加事件監聽器到我的viewmodel一旦VueJS加載。如果我不使用VueJS，添加事件監聽器就可以工作，所以我知道代碼是正確的，但他們從不附加在VueJS中。添加事件監聽器在VueJS 2

 <div id="app"> 
      <div name="pageContent" id="preview"> 
          <section class="row"> 
           <div class="columns medium-12"> 
            <h1>This is the top content</h1> 
            <p>ashcbaubvdiuavduabd</p> 
           </div> 
          </section> 
          <section class="row"> 
           <div class="columns medium-6"> 
            <h1>This is left content</h1> 
            <p>ashcbaubvdiuavduabd</p> 
           </div> 
           <div class="columns medium-6"> 
            <h1>This is the right content</h1> 
            <p>ashcbaubvdiuavduabd</p> 
           </div> 
          </section> 
         </div> 
     </div> 
    <script type="text/javascript"> 
let editorContainer = document.getElementById('preview'); 
    let controls = document.getElementById('defaultControls'); 
    let cmsEditor = new CmsEditor(editorContainer, controls); 
      var app = new Vue({ 
       el: '#app', 
       data: { 
        editor: cmsEditor 
       }, 
       mounted: function() { 
        // wire up our listeners 
        console.log('mounted') 
        document.oncontextmenu = function() { return false; }; 
        let rows = this.editor.EditorContainer.getElementsByTagName("section"); 
        for (var i = 0; i < rows.length; i++) { 
         console.log("section " + i + " : " + rows[i].innerHTML); 
         rows[i].addEventListener('mouseover', function() { 
          console.log('mouse over event'); 
          this.editor.SetActiveRow(this); 
         }); 
         rows[i].addEventListener('dblclick', function() { 
          this.editor.DisplayContextMenu(this); 
         }); 
        } 
       }, 
       methods: { 
        save: function() { 
         console.log('save'); 
         this.editor.Save(); 
        }, 
        undo: function() { 
         console.log('undo'); 
         this.editor.Undo(); 
        } 
       } 
      }); 
    </script>

來源

2017-09-13 Slee

在Vue公司活動從DOM事件不同。您沒有註冊任何Vue事件。你的回調不起作用，因爲你正在訪問錯誤的'this'。 – thanksd

[如何在回調中訪問正確的\'this \']（https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback）） – thanksd

如果您使用的是ES6，請使用箭頭函數，以便詞彙'this'（即VueJS實例的）被綁定。否則，你將不得不將它緩存在事件監聽器之外，例如'var self = this'，這樣在事件監聽器中你可以正確地引用你的Vue實例，例如'self.editor.SetActiveRow（這）'。 – Terry

看起來您正在創建將從DOM中刪除的元素的編輯器。 Vue使用#app作爲模板的內容，將模板編譯爲渲染函數，然後用渲染函數的結果替換DOM。鑑於編輯器是在現在已經不存在的DOM元素上創建的，我預計代碼會失敗。

您可能想要將編輯器的創建移動到mounted，然後設置您的事件偵聽器。

FWIW，我也認爲你有評論者提到的this問題。

我想應該是這樣的：

mounted: function() { 
    let editorContainer = document.getElementById('preview'); 
    let controls = document.getElementById('defaultControls'); 
    this.editor = new CmsEditor(editorContainer, controls); 

    // wire up our listeners 
    console.log('mounted') 
    document.oncontextmenu = function() { return false; }; 
    let rows = this.editor.EditorContainer.getElementsByTagName("section"); 
    for (var i = 0; i < rows.length; i++) { 
    console.log("section " + i + " : " + rows[i].innerHTML); 
    rows[i].addEventListener('mouseover',() => { 
     console.log('mouse over event'); 
     this.editor.SetActiveRow(this); 
    }); 
    rows[i].addEventListener('dblclick',() => { 
     this.editor.DisplayContextMenu(this); 
    }); 
    } 
},

來源

2017-09-13 20:32:55 Bert

添加事件監聽器在VueJS 2

回答

相關問題