如何在vuejs中的内部循环中从点击事件传递数据

Question

这是我的 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>

我想做的是当我点击按钮时我想触发一个功能并将整个订单对象传递给属性所以当对话框为真时我可以将订单对象传递给子组件。我试过这个

<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>

Answer 1

假设这是 ElementUI，我认为您需要使用 custom column template 和作用域插槽模板。

例如

<el-table-column label="View" min-width="150">
  <template slot-scope="{ row }">
    <el-col style="flex: 0">            
      <el-button icon="el-icon-plus" type="primary" @click="senddata(row.order)">
        View Order
      </el-button>
    </el-col>
  <template>
</el-table-column>

此处，插槽范围中的 row 是 orders 数组中的 TableRowData

如何在vuejs中的内部循环中从点击事件传递数据

How to pass data from click event in inner loop in vuejs

javascript

vue.js

vue-component

element-ui