Vue.JS：打开对话框后如何调用 function？

Question

我正在编写 Vuejs。 当我使用 function 打开一个对话框时，对话框包含 ID：content_description 的 textarea。

<v-dialog ref="dlgedit" v-model="editCanvasFlag" id="test" hide-overlay transition="scale-transition">
<v-card>
    <v-toolbar dark color="green darken-4">
      <v-btn  icon dark @click="editCanvasFlag = false">
        <v-icon>mdi-close</v-icon>
      </v-btn>
      <v-toolbar-title>Chỉnh sửa &nbsp; <v-chip color="green">{{  selectedCanvas !=null? selectedCanvas.name : '' }}</v-chip></v-toolbar-title>
      <v-spacer></v-spacer>
        <v-btn color="success"><v-icon left>mdi-content-save</v-icon>Update</v-btn>
    </v-toolbar>
    <div class="pa-12 pt-4 d-flex">
        <v-form ref="form" class="register-form" style="width:90%">
             <v-container class="pa-0">
                <h5>Description:</h5>
                <!-- <sun-ed id="content_description"></sun-ed> -->
                <textarea v-model="content_description" id="content_description"></textarea>
             </v-container>
        </v-form>
    </div>
</v-card>

我想在此对话框中创建 SunEditor：

createdialog() {
this.editCanvasFlag = true
this.content_description = SUNEDITOR.create('content_description',{
    plugins: plugins,
        buttonList: [
            ['undo', 'redo'],
            ['font', 'fontSize', 'formatBlock'],
            ['blockquote'],
            ['bold', 'underline', 'italic', 'strike'],
            ['fontColor', 'hiliteColor'],
            ['removeFormat'],
            ['align', 'horizontalRule', 'list'],
            ['table', 'link', 'image', 'video'], 
            ['fullScreen', 'codeView'],
            ['preview'],
        ],
        width: '100%',
        height: '200px',
        charCounter : true,
});}

但它错误： Error in v-on handler: "Error: [SUNEDITOR.create.fail] The element for that id was not found (ID:"content_description")"

当对话框打开时，我调用 function 创建这个 SunEditor 就可以了。

我想在打开对话框后加载这个 function 创建这个 SunEditor。 谁能帮我。 非常感谢！

Answer 1

您可以使用由v-dialog触发的input事件，只要有界 model 得到更新，这意味着一旦您打开和关闭对话框就会触发它

<v-dialog ref="dlgedit" v-model="editCanvasFlag" id="test" hide-overlay transition="scale-transition" @input="dialogToggle">
.....
</v-dailog>
<script>
  methods: {
   dialogToggle(dialogState) {
     if (dialogState) { // only when dialog get open
        // At this point you dialog state should have opened Now you can call your function
    // But to be sure you can check for DOM update
    this.$nextTick(() => {
      // Call your method, as it's completely gurantees if the DOM get updated
    })
      }

   }
  }
</script>

如果您无法找到您的模态，我建议您尝试不nextTick回调，然后使用nextTick 。