如何使用VUE同步DOM中的數據？

Question

我想使用Vue將數據從ACE編輯器綁定到前端，也就是說，當我在編輯器中鍵入內容時，我可以在其他位置同步內容。

編輯器邏輯很簡單，editor.getValue()獲取內容和editor.on('input', function(){......})收聽'輸入'事件。

ATM我有這樣的：

<div id="content"> 
    <div id="editor" v-ace-editor="{snippet: snippet , type: type}" style="height:400px; width:100%"></div> 
    <div>{{snippet}}</div> 
</div> 

<script> 


    Vue.directive('ace-editor', { 
     bind: function (el, binding, vnode) { 
      var editor = ace.edit(el); 
      editor.setValue(binding.value.snippet); 
      console.log(binding); 

      editor.on('input', function(){ 
       binding.value.snippet = editor.getValue(); 
      }) 

     } 
    }) 

    var vm = new Vue({ 
     el: '#content', 
     data: { 
      snippet : 'select * from ...', 
      type : 'hive' 
     } 
    }) 
</script> 

理想的情況下，當我鍵入代碼，在監聽器裏我更新的snippet值，而實際上{{snippet}}不會改變。

誰能告訴我爲什麼？

Answer 1

好吧，看起來這是因爲我把這個片段作爲一個字符串傳遞，產生了一個新的字符串，所以舊的字符串不會被跟蹤。 （不知道）

目前我的解決方案是建立一個對象，它的工作原理。

<div id="content"> 
    <div id="editor" v-ace-editor="{snippet: snippet}" style="height:400px; width:100%"></div> 
    <div>{{snippet.statement}}</div> 
</div> 

<script> 
    Vue.directive('ace-editor', { 
     bind: function (el, binding, vnode) { 
      var editor = ace.edit(el); 
      editor.setValue(binding.value.snippet.statement);   
      editor.on('input', function(){ 
       binding.value.snippet.statement = editor.getValue(); 
      }) 
     } 
    }) 

    var Snippet = function(){ 
     this.statement = "nothing"; 
     this.type = 'hive'; 
    } 

    var vm = new Vue({ 
     el: '#content', 
     data: { 
      snippet : new Snippet() 
     } 
    }) 
</script>