我怎么知道 filepond 是否被渲染？

Question

我需要手动操作一些 DOM 属性（动态更改文件元素的样式）。我通过 document.getElementById ("filepond - item-" + id).

搜索所需的元素

但是如果带有初始文件的 Filepond DOM 元素尚未渲染（getElementById() 未找到任何元素），我运行就会遇到问题。

我目前正在用this.$NextTick()解决这个问题：

<template>
 <file-pond
    ref="filepond"
    :server="server"
    :files="files"
    @initfile.once="markMainImage"
  />
</template>
<script>
[...]
  methods: {
    async markMainImage () {
      await this. $ nextTick ();
      document.getElementById ("filepond - item-" + id).classList.add ("main-image");
    },
  },
</script>

但这并不方便，也不是很可靠。 FilePond:loaded 事件是否可以用于此目的 (https://pqina.nl/filepond/docs/api/instance/events/#filepond-loaded-event)？

如果有，在Vue中如何使用？

@loaded="markMainImage" 不触发

或者是否有其他方法可以查明 filepond 是否使用初始文件呈现？

Answer 1

感谢Rik for

@addfile.once="markMainImage"

有效。

我怎么知道 filepond 是否被渲染？

How do I know if filepond is rendered?

vue.js

filepond