Vue js：如何在单击按钮时将类添加到最近的 td

Question

我是来自 JS/JQuery 的 Vue 新手。我有一张桌子，每行有 2 个可能的按钮和两个输入，都包含在 <td> 中。当我单击一个按钮时，我希望最近的输入添加一个类。在 JQuery 中，我会使用 closest 方法来选择相邻的 <td> 这是我的 Vue 模板语法。非常感谢！

<tbody>
                     <tr v-for="child in registeredChildren">
                        <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"}"><input style="text-align:center;" class="form-control editChild initial" type="text" v-model="child.timeIn" ></td>
                       <td><button v-on: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" ></td>
                       <td><button v-on:click="updateTimeOut(child)" class="btn btn-outline-success">Reset</button></td>
                    </tr>
 </tbody>
                

方法：我在想是否可以在 UpdateTimeIn 和 TimeOut 方法中添加一些代码，这可能是一种方法吗？

 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(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        },

**NB** I have the same for updateTimeOut

Answer 1

您使用的是 Vue，与 jQuery 不同，这意味着数据应该驱动 DOM。在 Vue 中，您不必考虑选择某些 dom 节点。

我也曾经从 jQuery 切换到 Vue。我提供了一个demo，希望你能从中找到灵感。

<button @click="onClick">click me</button>
<div class="fixed-classes" :class="{'dynamic-class': isClick}"></div>

data() {
  return {
    isClick: false
  };
},
methods: {
  onClick() {
    this.isClick = !this.isClick;
  }
}

可以通过代码沙箱链接在线运行：codesandbox

我根据代码沙箱中的cmets更新了代码。