VueJS 2에 이벤트 리스너 추가

Question

일단 VueJS가로드되면 내 viewmodel에 이벤트 리스너를 추가하려고합니다. VueJS를 사용하지 않는다면 이벤트 리스너를 추가하면 코드가 맞지만 VueJS에는 절대 연결되지 않는다는 것을 알 수 있습니다.

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

Answer 1

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