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