将 vue.js 存储数据传递给事件点击处理程序答案

【问题标题】：Passing vue.js store data to a event click handler将 vue.js 存储数据传递给事件点击处理程序
【发布时间】：2020-12-12 03:13:42
【问题描述】：

我在我的项目中使用常规的 Vue.js。我将数据存储在一个从头开始创建的存储中并在模板中使用它：

<template>
  <div>
    <div class="row">
      <div v-for="(picture, index) in storeState.pictures"
          :key="index"
          class="col-md-2 my-auto">   
          <div >                 
            <img class="img-thumbnail img-responsive" 
                :src="picture.url"
                @click="deleteMe">            
          </div>              
      </div>      
    </div>    
    </div>
</template>

<script>
import { store } from "../common/store.js"

export default {
  name:"PictureUpload",
    data() {
        return {
  storeState: store.state,           
        };
  },
  methods: {
    deleteMe() {
      let apiUrl = this.picture.url
      console.log(apiUrl)
    }
  }
}
</script>

我的图片渲染得很好，但现在我想为图片@click 添加一个delete() 函数，每当我点击按钮时，我都会得到：

TypeError: Cannot read property 'url' of undefined

那么如何在我的方法中访问我的图片数据呢？

【问题讨论】：

你在哪里定义picture？
在 v-for 循环中
我的回答有用吗？
好的，谢谢！我投了赞成票。
不客气，出了点问题，我只收到了赞成票+10，我没有收到接受投票+15但是答案有绿色复选标记，请尝试不接受它并再次接受它

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

您应该在点击处理程序中将picture 作为参数传递：

  @click="deleteMe(picture)">

并在方法中引用它：

 methods: {
   deleteMe(picture) {
     let apiUrl = picture.url //omit this
     console.log(apiUrl)
    }
   }

storeState 应该是一个计算属性：


export default {
  name:"PictureUpload",
    data() {
        return {
           
        };
  },
  computed:{
     storeState(){
    return store.state;
   }
  },
  methods: {
    deleteMe(picture) {
      let apiUrl = picture.url
      console.log(apiUrl)
    }
  }
}

【讨论】：