Vue js: How to add a class to the closest td on click of Button

@tykus HI, thanks for that. Yes, I have been looking at the Vue docs on the topic, ( https://vuejs.org/v2/guide/class-and-style.html )

and SO all afternoon, and I understand the fundamentals however, I have not yet managed to apply it such that when I click the button it applies the class to that neighbouring <td> and not all of them, as they are all generated with a v-for

@vincej What happens to the state of the child whenever you click the button; what changes?

@tykus HI MANY Thanks for coming back! Ok, a nice person on SO has made a suggestion which has gotten my code half the way there. When you click the button the background colour changes, bravo. However, it changes the background for ALL the<td>, and not the input standing next to it's associated button. NB: every input has it's own button which updates the updateTimeIn(Child). Child refers to an id which comes off of the <tr v-for="child in registeredChildren">. Somehow, I need to apply the css to ONLY that input neighbouring button so that the user knows that they have altered that specific input. For the sake of brevity I offer you here only that code which has been altered:

Template

<td class="col-3 pb-2 upDated"  ><input style="text-align:center;" class="form-control"  :class="{'dynamic-class': isUpDated }"   type="text" v-model="child.timeIn" ></td>
<td><button @click="updateTimeIn(child)" class="btn btn-outline-success">Reset</button></td>

Data

 data: function () {
        return {
            registeredChildren: [],
            updatedChild:{},
            childTimeOut:{},
            isUpDated:false
        }
    },

Script

  methods:{
        updateTimeIn(child){
         this.updatedChild = child;
          this.isUpDated = !this.isUpDated;
}

Styles

 <style>
    .upDated {
      background-color: white;
    }

    .dynamic-class {
      background-color: red;   // red is only for testing! 
    }
  </style>

@jlrdw Thanks for that. I have thousands of lines of regular JS, and that is my go to answer for this kind of problem. I would have had this answered days ago with JS / JQuery. However, I am trying to get off of JS, as it is difficult to maintain and it is very verbose. I tried using livewire with the same problem, and for me that was a total road accident. I find it bizaar that this is so hard with such a great framework as Vue .... I am also looking at Svelte, which is fascinating and not such a monster as Vue. Cheers!

@jlrdw Well, I thought I would update you. I spent like forever trying to use LiveWire to solve this problem. Then I spent what felt like a gazillion years with Vue trying to solve the same problem. And in the end I came to the conclusion that JS frameworks are very poor at identifying a single and specific input wrapped in a <td></td> in a sea of rows in an ocean of <td>'s. So, yesterday I gave up, and resorted to JS/JQuery:

        let timeIn = $(this).closest("tr").find("td.timeIn>input").val();
        let id = $(this).closest("tr").find("td.timeIn>input").attr("id");
        $(this).closest("tr").find("td.timeIn>input").css({"color": "red", "border": "2px solid red"});
});

Needless to say, it works and is fine. So, I am going to try one more JS Framework, "Svelte" BUT, in a test system - not my live system. I will give it this very task to see if it can handle it. I am hopeful, as Svelte is marketed as a JS compiler with bolt on Framework features. Anyway - I thought of you, when I gave up with Vue, and thought this might bring a smile to you. Cheers! Vince

@martinbean Martin, Many thanks for this outstanding response. It should be pinned. I have spent years writing raw JS/JQuery and my brain is deeply scripted in it's patterns. Too often Vue is described as an adjunct to JS. This is wholly misleading. Using Vue requires a wholesale reset of one's thinking. I am 7 hours behind the UK and I am going to have a go now at apply state to my table. Cross fingers I hope I get it right first time, and don't hit a wall. Many thanks is not enough!! Cheers Vince

@martinbean Ok, So, I have been studying your outstanding response together with the Vue docs and online resources. Nearly all the examples I have looked at require a true / false test as you also pointed out. However, my data set does not contain a such attributes off the DB. My table columns are "timeIn" and "timeOut". Both contain either a time eg 15:30 or "absent". Vue does not like either of those and they break the site. Any effort to adapt "absent" to say, "null" also breaks the site. I have not been able to find how to adapt these values to "true" and "false". So, that has been issue One.

HOWEVER, In my specific case, this above issue might be irrelevant. My rows of inputs have a unique Child_id contained within them verifiable through Chrome console. When I click the "Reset" button neighbouring an input, , Vue calls a method called "UpdateTimeIn". This method knows that what the unique Child_id is for that specific input and updates the "timeIn" / "timeOut" in the DB for that specific child. It then adds the time into for that correct input. BUT! It will also apply the class to ALL the inputs, and not just the unique child input just updated with a "timeIn". Note: there is no true/false test here at all. This is a mystery for me. Here is my code so far:

Relevant Template Section

<tr v-for="child in registeredChildren" v-bind: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" >
                         <input
                           :id=child.child_id
                           style="text-align:center;"
                           class="form-control upDated"
                           :class="{'dynamic-class': isUpDated }"
                           type="text" v-model="child.timeIn"
                           v-bind:class = "(child.child_id = id)?'upDated':'dynamic-class'">  // This does not apply the css
                       </td>

                       <td><button @click="updateTimeIn(child)" class="btn btn-outline-success" >Reset</button></td>
                    </tr>

It seems obvious to me that I should be able to make use of this Vue ability to identify the correct input by the child.child_id, and in addition to adding the time to the correct input, then also add a css class to the same input driven by the same click event which updated the timeIn. However, despite all my searching over the weekend, I can not find the solution.

Relevant Script sections

export default {
    data: function () {
        return {
            registeredChildren: [],
            updatedChild:{},
            childTimeOut:{},
            isUpDated:false
        }
    },
    mounted() {
        this.loadRegisteredChildren();   // Axios Loads all the children
    },

    methods:{
        updateTimeIn(child){
         this.updatedChild = child;
          this.isUpDated = !this.isUpDated;
        console.log(child.child_id,child.timeIn)

//AXIOS UPDATE THE DB here, with the correct timeIn for the child 

 <style>
    .upDated {
      background-color: lightblue;
    }
    .dynamic-class {
      background-color: lightpink;
    }
  </style>

I do not want to wear out my welcome with you, however I do not want to give up! The docs are good, but not specific to my question. If you can point me in the right direction I would be very grateful!! Many Thanks Vince !

@vincej Haven't read your entire post, but this:

v-bind:class = "(child.child_id = id)?'upDated':'dynamic-class'">

You should be using a comparison operator, e.g.,: == or ===

@apex1 Thanks Apex1, you are a star for always helping out! I tried your suggestion and it did not work. Essentially my problem is that Vue is applying the class to ALL the inputs and not just the selected input. I am going to look at "refs" in the hope that might find the answer. Cheers.

@vincej I don't know exactly what you want to accomplish, but one thing that you might want to try is in your loadRegisteredChildren() method, when you set your data to this.registeredChildren, you can map over the array and create a temporary property. Something like:

   const response = await axios.get(...etc...);
   this.registeredChildren = response.map((child) => ({
        ...child,
        isUpdated: false,
      }));

Then in your updateTimeIn() method, you can set that property (isUpdated or whatever you want to call it) to true:

updateTimeIn(id) {
      this.registeredChildren = this.registeredChildren.map((child) =>
        id === child.id ? { ...child, isUpdated: true } : child
      );
    },

or if you want to toggle:

this.registeredChildren = this.registeredChildren.map((child) =>
        id === child.id ? { ...child, isUpdated: !child.isUpdated } : child
      );

And then in your input:

      <input
		...other attributes...
        :class="child.isUpdated ? 'some class' : 'or default class''"
 
      />

There is probably a cleaner way, I saw martinbean use Vue.set() (this.$set(...)); so you may also want to look into that.