How to store/access the specific row data in a table (el-table) and display that in an dialog box (not alert) when clicked on a link in that row?

Question

I have created a table using el-table (elements - ui) in Vue.js. I have multiple columns in that table (id, username, total_number). The column total_number consists of buttons. When I click on the button, it should open up a dilaog box, and call a function called fetchData (in javascript) which sends the row object. The code that I have written is giving me some issues accessing that specific row data.

                <el-table-column  prop="count"
                   label="Total">

                   <template slot-scope="scope">
                      <el-button type="text" @click="dialogVisible = true">{{scope.row.count}}
                      </el-button>

                      <el-dialog
                        :visible.sync="dialogVisible"
                        :before-close="handleClose">
                           {{fetchData(scope.row)}}
                      </el-dialog>
                   </template>
                </el-table-column>

javascript code

fetchData(row){
   console.log(row.id +" "+row.username);
}

If I clicked on the button in the 1st row, and made a call to fetchData, I expect it to pass the object of the first row for scope.row is passed to the function fetchData. And so on for any row clicked. Instead, it somehow ends up printing the values (id and username) in the last row in the table.

There are total 7 rows in the table and 3 columns. The 3rd column has buttons in it. When I click on the button in the 1st row of the 3rd column, I want to call the function fetchData which passes the 1st row. That is I want to pass the row object of the 1st row. What actually happens in the above code is that it sends the last (7th) row's object (scope.row). And I want to call the fetchData function and pass the current row object when the dialog box opens up. What changes should I make in the above code to make in order access the current row when the button in that specific row is clicked?

I would really appreciate if someone pointed out my mistake here.

Thank you.

Answer 1

 var Main = { data() { return { dialogVisible: false, rowData: null, tableData: [{ id: 1, username: 'Tom', count: 10 }, { id: 2, username: 'Jack', count: 20 }, { id: 3, username: 'Leo', count: 30 }] } }, methods: { showDialogHandle(row) { this.rowData = Object.assign({}, row) this.dialogVisible = true }, handleCloseDialog() { this.rowData = null this.dialogVisible = false } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app')

 @import url("//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css");

 <script src="//unpkg.com/vue/dist/vue.min.js"></script> <script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script> <div id="app"> <el-table:data="tableData" style="width: 100%"> <el-table-column prop="id" label="ID" min-width="180"></el-table-column> <el-table-column prop="username" label="Name" min-width="180"></el-table-column> <el-table-column prop="count" label="Total" min-width="180"> <template slot-scope="scope"> <el-button type="text" @click="showDialogHandle(scope.row)">{{scope.row.count}} </el-button> </template> </el-table-column> </el-table> <el-dialog:visible.sync="dialogVisible":before-close="handleCloseDialog"> {{rowData}} </el-dialog> </div>

Each time the row data is clicked, store the row data in a variable and then displayed in the dialog.