Javascript 如何在vuejs的内部循环中传递来自单击事件的数据

这是我的vue模板

<template>
<div class="app-container">
  <el-dialog :visible="dialogVisible"
             title="View order"
             :before-close="() => dialogVisible = false">
    <order-form @success="handleAdd" @cancel="dialogVisible = false" />
  </el-dialog>
  <el-table v-loading="loading" :data="orders" border>
    <el-table-column prop="order.id" label="Id" />
    <el-table-column prop="order.fullName" label="Full Name" />
    <el-table-column prop="order.address.name" label="Address" />
    <el-table-column prop="order.status" label="Status" />
    <el-table-column label="View" prop="order.id" min-width="150">
      <el-col style="flex: 0">            
        <el-button icon="el-icon-plus" type="primary" @click="i want pass data from here">
          View Order
        </el-button>
      </el-col>
    </el-table-column>

  </el-table>
</div>
</template>

视图顺序

我想做的是当我点击按钮时，我想触发一个函数 并将整个order对象传递给属性，以便在对话框为true时 我可以将order对象传递给子组件。 我试过这个

<el-button icon="el-icon-plus" type="primary" @click="senddata(order)">

它不起作用，它给出了未定义的，所以它没有被解析。 提前谢谢

这是我的剧本

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { getOrders } from "@/api/store";
import dataStore from "@/store/modules/data";
import { OrderView } from "../../../models";
import { OrderInput } from "@/models";
import DataModule from "@/store/modules/data";
  import OrderForm from "./form.vue";

type _OrderInput = OrderInput;

interface TableRowData {
  editMode: boolean;
  order: OrderView;
  editedOrder: _OrderInput;
}

  @Component({
    components: {
      OrderForm,
    },
  })
export default class Orders extends Vue {
    orders: TableRowData[] = [];
    testdata: any;
  loading = false;
  dialogVisible = false;
  searchKey = "";
  async created() {
    await DataModule.ensureLoaded();
    this.fetchData();
  }

  async fetchData() {
    this.loading = true;
    await dataStore.loadorders();
    if (dataStore.orders.hasLoaded) {
      this.orders = dataStore.orders.data.map(order => ({
        editMode: false,
        order,
        editedOrder: { ...order }
      }));
    }
    this.loading = false;
  }
  handleAdd() {
    this.dialogVisible = false;
  }
    senddata(id: any) {
      console.log(id);
      this.dialogVisible = true;
    }
}
</script>

从“Vue”导入Vue；
从“vue类组件”导入组件；
从“@/api/store”导入{getOrders}；
从“@/store/modules/data”导入数据存储；
从“../../../models”导入{OrderView}”；
从“@/models”导入{OrderInput}；
从“@/store/modules/data”导入数据模块；
从“/form.vue”导入订单；
类型_OrderInput=OrderInput；
接口表行数据{
编辑模式：布尔；
订单：订单视图；
编辑顺序：_OrderInput；
}
@组成部分({
组成部分：{
订单，
},
})
导出默认类订单扩展Vue{
订单：TableRowData[]=[]；
测试数据：任何；
加载=假；
dialogVisible=false；
searchKey=“”；
异步创建（）{
等待DataModule.ensureLoaded（）；
这是fetchData（）；
}
异步获取数据（）{
这是。加载=真；
等待数据存储。loadorders（）；
if（dataStore.orders.hasload）{
this.orders=dataStore.orders.data.map（order=>({
编辑模式：false，
命令，
编辑顺序：{…顺序}
}));
}
这一点：加载=错误；
}
handleAdd（）{
this.dialogVisible=false；
}
senddata（id:任意）{
console.log（id）；
this.dialogVisible=true；
}
}

假设这是ElementUI，我认为您需要使用带有作用域插槽模板的

比如说

视图顺序

---

在这里，插槽范围中的

行

是您的

订单中的
表行数据
数组
非常感谢，我现在已经知道插槽范围了，我是vue的新手。再次感谢。与其说是个问题，不如说是个问题。我真的不喜欢这个框架，它的文档非常糟糕。我完全同意你的看法，这是vuejs要求的自由职业者项目。我更喜欢棱角分明、条理分明的写作，虽然写得多一些，但你知道在这种情况下应该在哪里搜索。谢谢你，我想你可能误解了。我喜欢Vue，觉得它很棒，但ElementUI一团糟。我不是一个真正的组件库爱好者，我更喜欢类似的东西，好吧，我会看到更多关于tailwind的内容，另一个小问题，我试着在中调用v-bind:testdata