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动态地将其内容绑定到数据属性上，这样就可以在加载时输入它，并使用@change属性保存更改。

然后，我想用ace-editor替换输入区域，它支持语法突出显示等特性。

因此，我在CodeEditor.vue中定义了一个组件，然后在QuizExecution.vue中导入和使用它。

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

问题

• 如何将v-model和@click应用于这个<CodeEditor>和in 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:您可以使用道具获得question_id值。我想应该是字符串或数字。并观察question_id，然后使用$emit将更改$event发送到主组件。

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