[英]Passing vue.js store data to a event click handler
I am using regular Vue.js in my project.我在我的项目中使用常规 Vue.js。 I store data in a store made from scratch and use it in a template:我将数据存储在从头开始制作的商店中并在模板中使用它:
<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>
My pictures are rendering well but now I want to add a delete()
function to the picture @click
and whenever I click on the button I get:我的图片渲染得很好,但现在我想在图片@click
添加一个delete()
函数,每当我点击按钮时,我都会得到:
TypeError: Cannot read property 'url' of undefined
So how can I access my picture data inside my method?那么如何在我的方法中访问我的图片数据呢?
You should pass picture
as parameter in the click handler :您应该在点击处理程序中将picture
作为参数传递:
@click="deleteMe(picture)">
and refer to it in the method like :并在方法中引用它,例如:
methods: {
deleteMe(picture) {
let apiUrl = picture.url //omit this
console.log(apiUrl)
}
}
the storeState
should be a computed property : storeState
应该是一个计算属性:
export default {
name:"PictureUpload",
data() {
return {
};
},
computed:{
storeState(){
return store.state;
}
},
methods: {
deleteMe(picture) {
let apiUrl = picture.url
console.log(apiUrl)
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.