鍍金池/ 問答/HTML/ 如何向鉤子函數(shù)（elment 的上傳組件的事件）傳遞參數(shù)

如何向鉤子函數(shù)（elment 的上傳組件的事件）傳遞參數(shù)

實(shí)際的開發(fā)需求是這樣的，頁面會(huì)動(dòng)態(tài)生成若干個(gè)子組件，每個(gè)組件都有上傳圖片并實(shí)時(shí)預(yù)覽圖片的功能（這里我用的是element-ui的Upload組件），遇到的問題是不知道如何把索引值傳遞給哪個(gè)函數(shù)，以實(shí)現(xiàn)不同子組件預(yù)覽對(duì)應(yīng)其上傳的圖片的功能

<template>
  <div>
    <template v-for="(item,i) in 4">
      <div :key="i" style="display:inline-block;margin-right:20px;">
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </template>
  </div>
</template>
回答
編輯回答
伐木累

可以用item中的唯一標(biāo)示來傳給這個(gè)子組件如（id）

2017年6月29日 23:55
編輯回答
不二心
    <template v-for="(item,i) in 4">
      <div :key="i" style="display:inline-block;margin-right:20px;">
        <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess.bind(this,i)">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </template>
    <script>
export default {
  data() {
    return {
      uploadUrl: '/api/upload',
      imageUrl: ''
    }
  },
  methods: {
    handleAvatarSuccess(idx,res,file,fileList){
      console.log(idx)
    }
  }
}
</script>

通過es5的Bind，綁定到函數(shù)上，就可以實(shí)現(xiàn)鉤子函數(shù)的傳參了

2017年12月12日 01:40