Vue. JS: Как вызвать функцию после открытия диалога?

Question

Я код Vuejs. Когда я использую функцию открытия диалогового окна, диалоговое окно включает текстовое поле с идентификатором: content_description.

<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")"

При открытии диалогового окна я вызываю функцию создания этого SunEditor в порядке.

Я хочу загрузить эту функцию, создать этот SunEditor после открытия диалогового окна. Может кто-нибудь помочь мне. Спасибо большое!

Answer 1

Вы можете использовать событие input, которое запускается v-dialog всякий раз, когда обновляется ограниченная модель, это означает, что оно будет срабатывать, когда вы откроете и закроете диалоговое окно

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