xxxxxxxxxx1
<template>2
<MDBDatatable sm hover reactive :dataset="dataset3.data" />3
<MDBBtn color="primary" @click="click">Click ME</MDBBtn>4
</template>5
xxxxxxxxxx1
<style>2
@import('https://use.fontawesome.com/releases/v5.15.1/css/all.css');3
4
#app {5
font-family: Roboto, Helvetica, Arial, sans-serif;6
}7
</style>xxxxxxxxxx1
<script>2
import { MDBDatatable, MDBBtn } from "mdb-vue-ui-kit";3
import { ref } from 'vue';4
5
import('mdb-vue-ui-kit/css/mdb.min.css');6
7
export default {8
components: {9
MDBDatatable, MDBBtn10
},11
methods: {12
click() {13
this.dataset3.data.rows[0].age++;14
this.dataset3.tm++;15
console.log("click age = " + this.dataset2.rows[0].age);16
}17
},18
setup() {19
const dataset2 = {20
columns: [21
{ label: "Name", field: "name" },22
{ label: "Position", field: "position", sort: false },23
{ label: "Office", field: "office", sort: false },24
{ label: "Age", field: "age", sort: false },25
{ label: "Start date", field: "date" },26
{ label: "Salary", field: "salary", sort: false }27
],28
rows: [29
{30
name: "Tiger Nixon",31
position: "System Architect",32
office: "Edinburgh",33
age: 61,34
date: "2011/04/25",35
salary: "$320,800"36
},37
{38
name: "Garrett Winters",39
position: "Accountant",40
office: "Tokyo",41
age: 63,42
date: "2011/07/25",43
salary: "$170,750"44
},45
{46
name: "Ashton Cox",47
position: "Junior Technical Author",48
office: "San Francisco",49
age: 66,50
date: "2009/01/12",51
salary: "$86,000"52
},53
{54
name: "Cedric Kelly",55
position: "Senior Javascript Developer",56
office: "Edinburgh",57
age: 22,58
date: "2012/03/29",59
salary: "$433,060"60
},61
{62
name: "Airi Satou",63
position: "Accountant",64
office: "Tokyo",65
age: 33,66
date: "2008/11/28",67
salary: "$162,700"68
},69
{70
name: "Brielle Williamson",71
position: "Integration Specialist",72
office: "New York",73
age: 61,74
date: "2012/12/02",75
salary: "$372,000"76
},77
{78
name: "Herrod Chandler",79
position: "Sales Assistant",80
office: "San Francisco",81
age: 59,82
date: "2012/08/06",83
salary: "$137,500"84
},85
{86
name: "Rhona Davidson",87
position: "Integration Specialist",88
office: "Tokyo",89
age: 55,90
date: "2010/10/14",91
salary: "$327,900"92
},93
{94
name: "Colleen Hurst",95
position: "Javascript Developer",96
office: "San Francisco",97
age: 39,98
date: "2009/09/15",99
salary: "$205,500"100
},101
{102
name: "Sonya Frost",103
position: "Software Engineer",104
office: "Edinburgh",105
age: 23,106
date: "2008/12/13",107
salary: "$103,600"108
},109
{110
name: "Jena Gaines",111
position: "Office Manager",112
office: "London",113
age: 30,114
date: "2008/12/19",115
salary: "$90,560"116
},117
{118
name: "Quinn Flynn",119
position: "Support Lead",120
office: "Edinburgh",121
age: 22,122
date: "2013/03/03",123
salary: "$342,000"124
},125
{126
name: "Charde Marshall",127
position: "Regional Director",128
office: "San Francisco",129
age: 36,130
date: "2008/10/16",131
salary: "$470,600"132
},133
{134
name: "Haley Kennedy",135
position: "Senior Marketing Designer",136
office: "London",137
age: 43,138
date: "2012/12/18",139
salary: "$313,500"140
}141
]142
};143
return {144
dataset2,145
dataset3: ref({146
data: dataset2,147
tm: 1148
})149
};150
}151
};152
</script>153
Console errors: 0