Vue.js 使用 @input 事件发送索引

Question

Vue 版本：3.1.1

大家好，

我正在使用动态创建组件，这意味着用户可以添加他想要的任何组件。我根据此文档 dynamic component creation 创建它。

我使用这个组件vue image uploader。

当用户想要上传图片时，我需要发送一个索引，像这样：

<div v-for="(line, index) in lines" v-bind:key="index">
{{index}}//if i log the index its 0,1,2,3 and its ok
...
          <image-uploader
            :preview="true"
            :class-name="['fileinput', { 'fileinput--loaded': line.hasImage }]"
            :capture="false"
            :debug="0"
            :auto-rotate="true"
            output-format="blob"
            accept="image/*"
            @input="setImage(output , index)"
            :ref="'fileUpload'+index"
          >
...

还有 setImage 功能：

    setImage: function(output,index) {
      console.log(index);
      console.log(output);
      return ;
      this.lines[index].hasImage = true;
      this.lines[index].image = output;
      let formData = new FormData();
      formData.append("file", output);
      Ax.post(upload_route, formData, {
        headers: { "Content-Type": "multipart/form-data" }
      })
        .then(response => {
          // upload successful
        })
        .catch(error => console.log(error));
    }

而日志结果是：

索引始终为 0 :(

当我想上传索引时如何发送索引？

我阅读了这个passing event and index 并对其进行了测试，但它不适用于组件。 因为这是自定义事件而不是 DOM 事件。

我该怎么办？

谢谢。

Answer 1

因为您实际上是将setImage 的返回值传递给@input，而不是方法。

您不能只向setImage 添加额外的参数，因为ImageUploader 组件只会向setImage 发出image。如果您需要向该方法添加额外的参数，则需要创建包装 ImageUploader 的自定义元素。

是这样的：

ImageUpload.vue

<template>
  <image-uploader
    :debug="0"
    :autoRotate="true"
    outputFormat="blob"
    :preview="true"
    :className="['fileinput', { 'fileinput--loaded' : hasImage }]"
    :capture="false"
    accept="image/*"
    doNotResize="['gif', 'svg']"
    @input="setImage"
    v-on="listeners" />
</template>

<script>
export default {
  props: {
    index: {
      required: true,
      type: Number
    }
  },
  data() {
    return {
      hasImage: false,
      image: null
    };
  },
  computed: {
    listeners() {
      const listeners = { ...this.$listeners };

      const customs = ["input"];

      customs.forEach(name => {
        if (listeners.hasOwnProperty(name)) {
          delete listeners[name];
        }
      });

      return listeners;
    }
  },
  methods: {
    setImage(image) {
      this.hasImage = true;
      this.image = image;

      this.$emit("input", this.index, image); // here, we emit two params, as index for the first argument, and the image at the second argument
    }
  }
};
</script>

然后，您可以像这样使用该组件：

<template>
  <div class="container">
    <div v-for="(line, index) in lines" :key="index">
      <image-upload :index="index" @input="setImage"/>
    </div>
  </div>
</template>

<script>
import ImageUpload from "./ImageUpload";

export default {
  components: {
    ImageUpload
  },
  data() {
    return {
      lines: ["1", "2", "3", "4"]
    };
  },
  methods: {
    setImage(index, image) {
      console.log("Result", index, image);
    }
  }
};
</script>

查看工作示例：https://codesandbox.io/s/vue-template-ccn0e