我怎么知道文件池是否被渲染？

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

感谢Rikcomment

@addfile.once="markMainImage"

有效。