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

Question

---

码

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的<v-textarea> ，我可以使用v-model将其内容动态双向绑定到data属性，以便可以在加载时初始化，并使用@change属性保存更改。

然后，我想用ace-editor替换输入区域，它支持语法高亮等功能。

所以，我已经定义了组件在CodeEditor.vue ，然后导入及在使用它QuizExecution.vue 。

但是， v-model和@change在<CodeEditor>标记上<CodeEditor> 。

---

问题

• 如何在@click应用v-model并在此<CodeEditor>上QuizExecution.vue 。
  阿卡。 使用容器组件中的数据对其进行初始化，并在更改时检索其内容并触发要保存的事件。
• 或者，是否有达到相同结果的方法：在创建时初始化并在更改时保存。

Answer 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)
       }
    }
 .....