在Vue.js中使用el-table创建的表中点击链接时，如何显示api调用的内容？(元素-ui)

<el-table-column type="custom" label="操作">
  <template slot-scope="scope">
    <el-button type="text" @click="showAPICall(scope.row)">
      查看API调用
    </el-button>
  </template>
</el-table-column>

data() {
  return {
    apiCallContent: '', // 保存API调用的内容
  }
},
methods: {
  showAPICall(row) {
    // 发送HTTP请求获取API调用的内容
    // 例如使用axios库发送GET请求
    axios.get('/api/call', { params: { id: row.id } })
      .then(response => {
        this.apiCallContent = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
}

<el-dialog title="API调用内容" :visible.sync="dialogVisible">
  <pre>{{ apiCallContent }}</pre>
</el-dialog>

data() {
  return {
    apiCallContent: '', // 保存API调用的内容
    dialogVisible: false, // 控制对话框的显示与隐藏
  }
},
methods: {
  showAPICall(row) {
    // 发送HTTP请求获取API调用的内容
    // 例如使用axios库发送GET请求
    axios.get('/api/call', { params: { id: row.id } })
      .then(response => {
        this.apiCallContent = response.data;
        this.dialogVisible = true; // 显示对话框
      })
      .catch(error => {
        console.error(error);
      });
  }
}