Vue-在使用ace-editor的用户定义组件上应用“ v-model”

时间:2019-08-25 12:21:47

标签: javascript vue.js vuejs2 ace-editor


代码

CodeEditor.vue:

<template>
  <div class="ace-container">
    <div class="ace-editor" ref="ace"></div>
  </div>
</template>

<script>
  import ace from 'ace-builds'
  import 'ace-builds/webpack-resolver'
  import 'ace-builds/src-noconflict/theme-monokai'
  import 'ace-builds/src-noconflict/mode-javascript'

  export default {
    mounted() {
      this.aceEditor = ace.edit(this.$refs.ace, {
        maxLines: 60,
        minLines: 10,
        fontSize: 14,
        theme: this.themePath,
        mode: this.modePath,
        tabSize: 4
      })
    },
    data() {
      return {
        aceEditor: null,
        themePath: 'ace/theme/monokai',
        modePath: 'ace/mode/javascript'
      }
    },
    methods: {
      setCode(code) {
        this.aceEditor.setValue(code);
      },
      getCode() {
        return this.aceEditor.getValue();
      },
    }
  }
</script>

<style>
  .ace-editor {
    width: 600px;
    height: 600px;
  }
</style>

QuizExecution.vue: (部分)

<template>
  <v-app height="100%">
    <div id="qz-wrapper">
      <!--
      <v-textarea id="programmingText" v-model="answerData[question.id]"
                  @change="saveAnswer(qe.id, question.id)" label="Code" outlined></v-textarea>
      -->

      <CodeEditor id="programmingText" v-model="answerData[question.id]"
                  @change="saveAnswer(qe.id, question.id)"></CodeEditor>
    </div>
  </v-app>
</template>

<script>
  import Vue from 'vue'
  import CodeEditor from "./CodeEditor";

  export default {
    components: {CodeEditor},
    data() {
      return {
        // ..
      }
    }
  }
</script>

<style scoped>
</style>

说明

借助vuetify的{​​{1}},我可以使用<v-textarea>将其内容动态双向绑定到data属性,这样可以在加载时进行初始化并保存通过v-model属性进行更改。

然后我想用@change替换输入区域,该区域支持语法高亮等功能。

因此,我已经在ace-editor中定义了一个组件,然后在CodeEditor.vue中导入并使用了它。

但是QuizExecution.vuev-model@change标签上不起作用。


问题

  • 如何使用<CodeEditor>在此v-model上应用@click<CodeEditor>
    ka使用容器组件中的数据对其进行初始化,并在更改时检索其内容并触发要保存的事件。
  • 或者,无论如何,要获得相同的结果:在创建时初始化并在更改时保存。

1 个答案:

答案 0 :(得分:1)

您可以使用道具并通过@update_question_id观看更改事件;

 <CodeEditor id="programmingText" :question_id="answerData[question.id]"
              @update_question_id="answerData[question.id]=@event"
              ></CodeEditor>
....
watch:{
  answerData(){
     saveAnswer(this.qe.id, this.question.id)
  }
}

CodeEditor.vue: 您可以使用props获得question_id值。我认为它将是字符串或数字。 还要观看question_id,然后使用$ emit将更改$ event发送到主要组件。

export default {
    props:{
      question_id: [String,Number]
    },
    watch:{
       question_id(val){
          this.$emit("update_question_id",val)
       }
    }
 .....