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

好吧，似乎这是因为我将片段作为字符串传递，这会产生一个新字符串，因此不会跟踪旧字符串。（不确定）

目前我的解决方案是构建一个对象并且它可以工作。

(append '() '((1 2 3)) '((4 5 6)) '("|")) => ((1 2 3) (4 5 6) "|")

如何使用VUE同步DOM中的数据？

1 个答案: