Vue中在data里如何調(diào)用method方法

這篇文章主要介紹“Vue中在data里如何調(diào)用method方法”，在日常操作中，相信很多人在Vue中在data里如何調(diào)用method方法問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue中在data里如何調(diào)用method方法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

今天我用到了Element的一個(gè)組件

如下：

其組件的代碼如下

// template內(nèi)容：
<template>
  <div>
    <el-table
      :data="tableData"
      
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

// data數(shù)據(jù)內(nèi)容
 tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區(qū)金沙江路 1519 弄",
          children: [
            {
              id: 21,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀區(qū)金沙江路 1519 弄",
            },
          ],
        },
      ],

如果想要在表格中加入一個(gè)按鈕，是可以加進(jìn)去的（Element的表格組件是可以加入元素標(biāo)簽的，直接寫(xiě)在空所對(duì)應(yīng)的表格里面即可），代碼如下：

// 要改變data里面的內(nèi)容即可
{
  id: 2,
  date: "2016-05-01",
  name: "王小虎",
  address: "上海市普陀區(qū)金沙江路 1519 弄",
  children: [{
    id: 21,
    date: "2016-05-01",
    name: "王小虎",
    address: (
     <el-button type="primary" plain>確認(rèn)</el-button>
     ),
  }]
}

頁(yè)面渲染的效果如下

注意，這個(gè)地方如果你想給里面的按鈕添加事件的話(huà)，不能夠直接在按鈕里面加 @click 或者 onclick ，這樣添加按鈕事件，會(huì)產(chǎn)生錯(cuò)誤，效果如下：

// 先是添加@click的方法
{
  id: 2,
  date: "2016-05-01",
  name: "王小虎",
  address: "上海市普陀區(qū)金沙江路 1519 弄",
  children: [{
    id: 21,
    date: "2016-05-01",
    name: "王小虎",
    address: (
    <el-button type="primary" plain @click="showMe()">確認(rèn)</el-button>
    ),
  }],
}

1、如果用@click的方法，在代碼塊里面就會(huì)顯示錯(cuò)誤信息：

2、如果使用onclick方法，代碼塊不會(huì)報(bào)錯(cuò)，在頁(yè)面渲染的控制臺(tái)會(huì)顯示錯(cuò)誤：

// 使用的onclick方法如下：
{
  id: 2,
  date: "2016-05-01",
  name: "王小虎",
  address: "上海市普陀區(qū)金沙江路 1519 弄",
  children: [{
    id: 21,
    date: "2016-05-01",
    name: "王小虎",
    address: (
    <el-button type="primary" plain onclick="showMe">確認(rèn)</el-button>
    ),
  }]
}

效果如下：

如果想要在表格里面添加按鈕事件的話(huà)

代碼如下：

{
  id: 2,
  date: "2016-05-01",
  name: "王小虎",
  address: "上海市普陀區(qū)金沙江路 1519 弄",
  children: [{
     id: 21,
     date: "2016-05-01",
     name: "王小虎",
     address: (
        <el-button type="primary" plain onclick={() => this.showMe()}>確認(rèn)</el-button>
      ),
  }]
}

這種在data數(shù)據(jù)里面添加 οnclick={() => this.函數(shù)名()} 是不會(huì)出現(xiàn)錯(cuò)誤的

到此，關(guān)于“Vue中在data里如何調(diào)用method方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！