如何解决将vue.js存储数据传递给事件单击处理程序
我在项目中使用常规Vue.js。我将数据存储在从头开始的存储中，并在模板中使用它：
/** Create Temp Table with the order name so that I Could retreive it later*/
Schema::create($order_name,function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('service_request_id')->nullable();
$table->string('service_request_order_name')->nullable();
$table->string('created_service_request_order_name')->nullable();
$table->temporary();
$table->timestamps();
});
//Save the data in temp table
$a = DB::table($order_name)->insert(['service_request_id' => $service_request->id,'service_request_order_name' => $old_order_name,'created_service_request_order_name' => $order_name]);
dd(
DB::table($order_name)->where('created_service_request_order_name',$order_name)->get()
);
我的图片渲染效果很好，但是现在我想向图片public function persistData(){
dd(
DB::table($order_name)->where('created_service_request_order_name',$order_name)->get()
);
添加Base table or view not found: 1146 Table 'test.ORDER_001' doesn't exist
函数，每当我单击按钮时，我都会得到：
<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>
解决方法
您应该在点击处理程序中将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)
}
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
