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

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

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

但是QuizExecution.vue和v-model在@change标签上不起作用。

问题

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

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

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

代码

说明

问题

1 个答案: