如何提取Vuetify表格行id通过axios发送POST请求并解决报错

问题原因排查&修复方案 #

1. 核心报错原因 #

你的代码在初始化阶段就已经执行失败，因此点击按钮没有任何响应：students数组中的name、status字段值为字符串类型，没有添加引号包裹，JS会将pedro、activo识别为未声明的变量，直接抛出变量未定义错误，导致整个Vue实例初始化失败，后续交互逻辑全部不生效。

2. 其他优化&修复点 #

• POST请求参数规范：当前你将id拼接在URL中属于GET请求的传参方式，POST请求建议将参数放在请求体中传递
• 补充双重校验：在add方法内新增status校验，和模板的v-if判断形成双重保障，避免异常场景下非法提交
• 补充跨域问题排查：如果请求发往后端出现跨域错误，需要后端配置CORS跨域规则

3. 修复后完整代码 #

模板部分

<div id="app">
  <v-app id="inspire">
    <v-card>
      <v-card-title>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
      </v-card-title>
      <v-data-table
        :headers="headers"
        :items="students"
        :search="search"
      >
        <template v-slot:item.status="{ item }">
          <v-btn v-if="item.status === 'activo'" @click="add(item)">Add</v-btn>
          <v-btn v-else disabled>暂无权限</v-btn>   
        </template>
      </v-data-table>
    </v-card>
  </v-app>
</div>

JS部分

// 注意：确保你已经在项目中正确引入axios，否则会抛出axios未定义错误
const app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),    
  data() {
    return {
      search: '',
      headers: [
        { text: '序号列表', align: 'start', value: 'id'},
        { text: '姓名', align: 'start', value: 'name'},
        { text: '操作', value: 'status' }
      ],
      students: [
        {
          id: 1,
          name: 'pedro',
          status: 'activo',
        },
        {
          id: 2,
          name: 'juan',
          status: 'activo',
        },
        {
          id: 3,
          name: 'jose',
          status: 'activo',
        },
      ]
    };
  },
  methods: {
    add (item) {
      // 二次校验状态，避免异常提交
      if (!item || item.status !== 'activo') return
      // POST请求将id放在请求体中传递，如果后端要求放在查询参数可自行换回拼接方式
      axios.post('http://localhost/list', {
        id: item.id
      }).then(response => {
        this.response = response
        // 可在这里添加提交成功的提示逻辑
      }).catch(e => {
        console.log('请求错误：', e)
      });
    },
  }
});

4. 额外注意事项 #

如果你的后端接口要求必须将id放在URL的查询参数中，将axios请求部分换回原来的拼接写法即可，只要保证字符串字段加了引号就能正常运行。

内容的提问来源于stack exchange，提问作者plasticheart