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>