javascript - vue中创建的组件a，修改页面中某一个a 其余a的数据也会同步发生变化

Question

    ready(){
        var myTextarea=document.getElementById("myeditor")
        var _self = this;

        var editor=CodeMirror.fromTextArea(myTextarea, {
             lineNumbers: true,//设置行号 boolean
             value: 'SELECT * FROM table',//编辑框初始值 string
             mode: 'text/x-mysql',//当前code模式 模式的选择可以在CodeMirror.modes中查看
             height: 100,//高度
             indentUnit: 4,//缩进块用多少个空格表示 默认是2
             autofocus: true,
             //此处是引用sql-hint.js的配置项
             hintOptions:{
                 completeSingle: false, //当匹配只有一项的时候是否自动补全
                    tables: {
                        table1: ['name', 'score', 'birthDate'],
                        table2: ['name', 'population', 'size']
                    }
             },//表元信息
             extraKeys: {//快捷键 可提供三种模式 sublime、emacs、vim。 使用时需要引入js支持包
                 "F9": function (editor) {
                     format(editor);
                 },
                 "F8": function (editor) {
                     query(editor);
                 }
                 }

            });
            //变成组件实例的属性 方便其他方法中调用codemirror实例
            // this.editor = editor;

            editor.on("change", function(editor, change) {//任意键触发autocomplete
                //此处逻辑用来控制button按钮的状态
                if(editor.getValue() !== ""){
                    _self.textCon = false;
                }else{
                    _self.textCon = "disabled";
                }
           if (change.origin == "+input"){
               var text = change.text;
               //if(!ignoreToken(text))//不提示
               setTimeout(function() { editor.execCommand("autocomplete"); }, 20);
           }
        });
    },

methods:{

        toggleSQlTMPL(){
            this.showSQLTMPL=!this.showSQLTMPL

            $(this.$els.sqleditor).css({
                width:this.showSQLTMPL?'calc( 100% - 140px)':'100%'
            })
        },
        changeDB(event){
            this._changeDB(this.uid,this.$refs.dbselector.value)
        },
        addTemplate(event,param){
            // console.log(param)
            // console.log(this.getSQLTemplate)
            var sqlString = this.getSQLTemplate[param];
            var initCon = this.getTabData.editor.getValue();
            // var initCon = this.editor.getValue();
            if(initCon == ""){
                console.log(this.getTabData.editor);
                this.getTabData.editor.setValue(sqlString);
                // this._changeSQL(this.uid,sqlString);
            }else{
                console.log(this.getTabData.editor);
                this.getTabData.editor.setValue(initCon + '\n' + sqlString);
                // this._changeSQL(this.uid,initCon + '\n' + sqlString);
            }
        },
    },

组件a中在ready生命周期函数中调用codemirror的方法，现在修改页面组件某一个a，其余a的数据也会发生变化，怎么解决？ 如何让组件中的editor变为每个组件私有的部分？

Answer 1

不要用 getElementById 通过 id 来获取元素。
应该通过 ref（Vue.js 2.0） 标记元素，然后用 $refs（Vue.js 2.0） 来获取元素。
Vue.js 1.0 的方法参考文档 API。