Open the dialog box how to automatically convert the data of the v-for loop into a QR code to display?

problem description

what should be written in the open callback? I can"t get index and row

if I write this.

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)
< template >

<el-button @click="centerDialogVisible = true;"></el-button>
<el-dialog
  :visible.sync="centerDialogVisible"
  center
  width="40%"
  @open="qrcode(scope.$index,scope.row)"
>
  <el-table :data="sites">
    <el-table-column>
      <template slot-scope="scope">
        <div :id="`qrcode${scope.$index}`" ref="qrcode">123</div>
        <el-button @click="qrcode(scope.$index,scope.row)"></el-button>
      </template>
    </el-table-column>
    <el-table-column label="" prop="name"></el-table-column>
  </el-table>
</el-dialog>

< / div >
< / template >

< script >
import QRCode from "qrcodejs2";
export default {

components: {},
data() {
  return {
    centerDialogVisible: false,
    index: "",
    row: "",
    sites: [
      { name: "abc", age: 10 },
      { name: "qwe", age: 11 },
      { name: "asd", age: 12 }
    ]
  };
},
created() {},
mounted() {},
methods: {
  qrcode(index, row) {
    let qrcode = new QRCode(`qrcode${index}`, {
      width: 200, // 
      height: 200, // 
      text: row.age // 
    });
  }
}

};
< / script >

what result do you expect? What is the error message actually seen?

Feb.27,2022

Sorry ~ I didn't see the reply until now, whether the problem has been solved. scope is the value in the table. So you can't get the outer layer.

<template slot-scope="scope">
</template>

look at your code open here, just to show el-dialog . There is no need to go to @ open= "qrcode (scope.$index,scope.row)" .

Menu