Vue.js指定表格单元格赋值异常问题（@vue/cli 4.1.2）

你遇到的问题根源很清晰：当前所有表格行的「Result」单元格都绑定了同一个全局的result变量，所以不管哪一行触发请求，只要这个变量更新，所有行都会显示相同的结果。要让每个行只更新自己的单元格，我们需要给每个查询单独存储结果，而不是用一个全局变量。

下面是具体的修改步骤：

1. 替换全局结果变量为映射对象 #

在组件的data中，把单个的result: ''改成一个对象results: {}，用来存储每个查询ID对应的结果：

data() {
  return {
    queries: [],
    results: {}, // 替换原来的result: ''
    currentSort:'name',
    currentSortDir:'asc',
    pageSize:999,
    currentPage:1
  };
},

2. 修改runQuery方法存储对应ID的结果 #

更新请求成功后的逻辑，把返回的结果存入results对象中，键就是当前查询的ID：

runQuery(id) {
  axios
   .get(`${server.msURL}/run/${id}`)
   .then(Response => {
      alert(Response.data);
      this.results[id] = Response.data; // 按ID存储结果，而非覆盖全局变量
      console.log(this.results[id]);
    });
},

3. 修改模板绑定对应ID的结果 #

把表格中「Result」列的绑定从{{ result }}改成{{ results[query.id] || '' }}，这样每个行只会显示自己ID对应的结果：

<!-- 同时可以去掉单元格上的点击事件，避免误触发请求 -->
<td>{{ results[query.id] || '' }}</td>

这样修改后，点击某一行的「Run Query」按钮时，只会更新该行对应的「Result」单元格，其他行的结果不会受到影响。

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