明仕msyz555注册vue中创立的组件a,修正页面中某一个a 其他a的数据也会同步发作变革

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

        var editor=CodeMirror.fromTextAreamyTextarea, {
             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 {
                     formateditor;
                 },
                 "F8": function editor {
                     queryeditor;
                 }
                 }

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

            editor.on"change", functioneditor, change {//恣意键触发autocomplete
                //此处逻辑用来控制button按钮的形状
                ifeditor.getValue !== ""{
                    _self.textCon = false;
                }else{
                    _self.textCon = "disabled";
                }
           if change.origin == "+input"{
               var text = change.text;
               //if!ignoreTokentext//不提示
               setTimeoutfunction { editor.execCommand"autocomplete"; }, 20;
           }
        };
    },

methods:{

        toggleSQlTMPL{
            this.showSQLTMPL=!this.showSQLTMPL

            $this.$els.sqleditor.css{
                width:this.showSQLTMPL?calc 100% - 140px:100%
            }
        },
        changeDBevent{
            this._changeDBthis.uid,this.$refs.dbselector.value
        },
        addTemplateevent,param{
            // console.logparam
            // console.logthis.getSQLTemplate
            var sqlString = this.getSQLTemplate[param];
            var initCon = this.getTabData.editor.getValue;
            // var initCon = this.editor.getValue;
            ifinitCon == ""{
                console.logthis.getTabData.editor;
                this.getTabData.editor.setValuesqlString;
                // this._changeSQLthis.uid,sqlString;
            }else{
                console.logthis.getTabData.editor;
                this.getTabData.editor.setValueinitCon + \n + sqlString;
                // this._changeSQLthis.uid,initCon + \n + sqlString;
            }
        },
    },

组件a中在ready生命周期函数中调用codemirror的办法,如今修正页面组件某一个a,其他a的数据也会发作变革,怎样处理? 怎样让组件中的editor变为每个组件私有的部分?

不要用 getElementById 经过 id 来获取元素。
应该经过 ref(Vue.js 2.0) 标记元素,然后用 $refs(Vue.js 2.0) 来获取元素。
Vue.js 1.0 的办法参考文档 API。

(看完/读完)这篇文章有何感想! 明仕msyz555注册的分享…

发表评论

姓名 *
电子邮件 *
站点