Vue.js点击按钮时如何为最近的td内input元素添加指定类？

方案一：数据动态绑定类（最优方案） #

这是符合Vue设计理念的实现方式，全程不需要操作DOM，所有视图变化由数据状态控制：

1. 先给registeredChildren数组里的每个child对象新增两个状态字段，用来控制对应输入框的类显隐：

// 你初始化registeredChildren的时候给每条数据加两个默认false的字段即可
{
  child_id: xxx,
  childFirstName: 'xxx',
  // ...其他原有字段
  isTimeInActive: false, // 控制timeIn输入框的自定义类
  isTimeOutActive: false // 控制timeOut输入框的自定义类
}

2. 修改模板中input的类绑定逻辑，把你要添加的类和上面的状态做关联：

<tbody>
  <tr v-for="child in registeredChildren" :key="child.child_id">
    <td class="col-2"><a :href="'/getchild/'+ child.child_id">{{child.childFirstName}}</a>&nbsp;&nbsp;{{child.childLastName}}</td>
    <!-- TIME IN -->
    <td class="col-3 pb-2">
      <!-- 动态绑定自定义类，比如你要加的类叫highlight，isTimeInActive为true时自动添加 -->
      <input style="text-align:center;" 
        class="form-control editChild initial" 
        type="text" 
        v-model="child.timeIn"
        :class="{'highlight': child.isTimeInActive}">
    </td>
    <td><button @click="updateTimeIn(child)" class="btn btn-outline-success">Reset</button></td>
    <!-- TIME Out -->
    <td class="col-3 pb-2">
      <input style="text-align:center;" 
        class="form-control editChild" 
        type="text" 
        v-model="child.timeOut"
        :class="{'highlight': child.isTimeOutActive}">
    </td>
    <td><button @click="updateTimeOut(child)" class="btn btn-outline-success">Reset</button></td>
  </tr>
</tbody>

3. 修改你的请求方法，在接口请求成功后修改对应状态即可自动给输入框加类：

注意把then的回调改成箭头函数，避免this指向错误

methods:{
  updateTimeIn(child){
    this.updatedChild = child;
    console.log(child.child_id,child.timeIn)
    axios.post('http://kidsclub.test/upDateChildTimeIn', {
      child_id: child.child_id,
      timeIn: child.timeIn,
    })
    .then((response) => {
      console.log(response);
      // 直接修改状态，Vue会自动更新视图给对应input加类
      child.isTimeInActive = true;
      // 如果需要过几秒自动移除类可以加定时器：
      // setTimeout(() => child.isTimeInActive = false, 2000)
    })
    .catch(function (error) {
      console.log(error);
    });
  },
  // updateTimeOut方法同理，修改isTimeOutActive即可
  updateTimeOut(child){
    // 原有逻辑不变，请求成功后加 child.isTimeOutActive = true
  }
}

方案二：操作DOM（不推荐，仅作为过渡方案） #

如果你暂时习惯jQuery的DOM操作思路，也可以通过事件对象拿到元素直接操作，但是不建议长期使用，Vue复用DOM时容易出现异常：

1. 给点击事件传入原生事件对象$event：

<button @click="updateTimeIn(child, $event)" class="btn btn-outline-success">Reset</button>

2. 在方法里通过原生API查找对应输入框加类：

updateTimeIn(child, e){
  // 原有逻辑不变
  axios.post(...).then(() => {
    // 找到按钮的父元素td，再找上一个兄弟td，再选中里面的input加类
    e.target.parentElement.previousElementSibling.querySelector('input').classList.add('highlight')
  })
}

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