Vue.js发送带有@input事件的索引

Vue版本：3.1.1

嘿，伙计们

我正在使用动态创建组件，这意味着用户可以添加任何他想要的组件

我使用这个组件

当用户想要上传图像时，我需要发送一个索引，如下所示：

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

日志结果为：

索引始终为0:(

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

我读了这篇文章并测试了它，但它在组件上不起作用。 因为这是一个自定义事件，而不是DOM事件

我该怎么办

---

谢谢。

因为您实际上是将

setImage

的返回值传递给

@input

，而不是方法

您不能只向

setImage

添加额外的参数，因为ImageUploader组件只向

setImage

发送一个

image

。如果您需要向该方法添加额外的参数，您需要创建包装ImageUploader的自定义元素

是这样的：

ImageUpload.vue

导出默认值{
道具：{
索引：{
要求：正确，
类型：编号
}
},
数据（）{
返回{
hasImage:错，
图像：空
};
},
计算：{
听众（）{
const listeners={…this.$listeners}；
常量海关=[“输入”]；
customs.forEach（名称=>{
if（listeners.hasOwnProperty（name））{
删除侦听器[名称]；
}
});
返回听众；
}
},
方法：{
设置图像（图像）{
this.hasImage=true；
这个图像=图像；
this.$emit（“input”，this.index，image）；//在这里，我们发出两个参数，作为第一个参数的索引，图像作为第二个参数
}
}
};

然后，您可以使用该组件，如下所示：

从“/ImageUpload”导入ImageUpload；
导出默认值{
组成部分：{
图像上传
},
数据（）{
返回{
行：[“1”、“2”、“3”、“4”]
};
},
方法：{
setImage（索引，图像）{
console.log（“结果”、索引、图像）；
}
}
};

---

请参阅工作示例：

@nmfzone您能看一看吗。有人能帮忙吗？但要发送此索引，您必须有一个索引，您的索引来自何处？是否有一个v-for？如果您不创建计算属性，甚至不创建一个将动态发出该索引的方法，则每次调用都会在索引中引发一个值，因此您可以很抱歉，您的提及似乎没有通知我。让我看一看@metiIt似乎

@input

接受函数名，而不是函数的返回值。因为您正在调用

setImage（输出，索引）

，实际上您正在将

setImage

的返回值传递给

@input

。它是否在@meti工作？至少添加一条注释以确认它是否工作。

    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));
    }