[Vuejs]-How to use VUE to synchronise data in DOM?

by

0👍

Alright, seems that this is because I pass the snippet as a string, which produced a new string so the old one won’t be tracked. (not sure)

Currently my solution is to build an object and it works.

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

Leave a comment