Nuxt3 应用程序与 cloudinary uploadWidget 的问题

Answer 1

您似乎在条件渲染中遇到了 v 槽属性的反应性问题。解决此问题的一种方法是使用计算属性有条件地呈现上传小部件。这样，您可以确保仅在必要的属性可用时才呈现组件。我自己还没有对此进行测试，因此请根据需要进行调整，但这应该是一个很好的起点：

<template>
  <div class="img__container">
    <template v-if="shouldRenderUploadWidget">
      <CldUploadWidget
        v-slot="{ open, widget }"
        uploadPreset="****"
        @upload="handleUploadClick($event.value.info)"
      >
        <div
          @click="open"
          class="add__image d-flex justify-content-center align-items-center"
        >
          <IconCSS
            size="65px"
            name="material-symbols:note-stack-add-outline"
          />
        </div>
      </CldUploadWidget>
    </template>
    <template v-else>
      <div class="add__image">
        <CldUploadWidget
          v-slot="{ open, widget }"
          uploadPreset="****"
          @upload="handleUploadClick($event.value.info)"
        >
          <div>
            <CldImage
              alt="miner-img"
              @click="open"
              width="150"
              height="150"
              :src="miner?.img || editMiner.img"
            ></CldImage>
          </div>
        </CldUploadWidget>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  computed: {
    shouldRenderUploadWidget() {
      // Check if the necessary properties are available
      return (
        (!this.editMiner.img && this.$slots.default) || this.miner?.img
      );
    },
  },
  methods: {
    handleUploadClick(info) {
      // Handle the upload click event
      console.log('Uploaded info:', info);
    },
  },
};
</script>