How to leave button selected in each row of a table - html

Question

I have a doubt, I think it's even simple. I have a table that receives data from a JSON, each row of that table is a JSON field. On each line I added two buttons (Like/Dislike) to check the search quality. However, when I click on the like, for example, and I click on the like of the second line, it does not keep the like of the first line selected.
The method should work like this, after returning the data, the user will go through line by line evaluating the search, choosing between like or dislike. After that, we will take this assessment and save it.
However, it is not keeping the evaluation option selected in each line.
The code already has integration with VUE
Follow File HTML
<template>
<div v-for="regList in myJson" :key="regList" class="container" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table>
<thead>
<tr>
<th>Documento</th>
<th colspan="2">Avalie a Busca</th>
</tr>
</thead>
<tbody>
<tr v-for="countryList in regList[2]" :key="countryList">
<td style="visibility: visible">
{{countryList}}
</td>
<td>
<button class="btn btn-1" type="button"><i class="fa fa-thumbs-up"></i></button>
</td>
<td>
<button class="btn btn-2" type="button"><i class="fa fa-thumbs-down"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
EDIT 1
Nikola Pavicevic's solution seems to be adequate, but I needed to detail my code a little more. I have a Vue file running the code. The project is for the user to type a term, send it to the backend, which will return a Json, with an autocomplete phrase and also information from another API. In the frontend I separate this sentence from the rest of the JSON and present the autocomplete with the JSON inside the Table. The data I show in the table is just a description. I'll also leave a model of how the JSON goes to the table.
Part. Vue:
<script>
export default {
name: 'Autocomplete',
data: function() {
return {
autoComplete: "",
maxChars: 75,
connection: null,
myJson: []
}
},
mounted() {
const url = "ws://localhost:8000/"
this.connection = new WebSocket(url);
this.connection.onopen = () => console.log("connection established");
this.connection.onmessage = this.receiveText;
},
methods: {
sendText() {
const inputText = this.$refs.editbar.textContent;
this.connection.send(inputText);
},
receiveText(event) {
let result = JSON.parse(event.data)
this.autoComplete = result.shift();
this.myJson = result
}
}
}
</script>
Return Json in table:
[
{
"1": 0.471,
"2": {
"82": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
},
{
"1": 0.47,
"2": {
"686": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
}
]
EDIT 2 - Problem Soluction OK
Following Nikola's instructions, I ended up solving the problems. I just had to adjust to my situation. Follow code:
The ForEach I had to leave inside the Receive Text, as it is the place where my JSON is supplied with information
receiveText(event) {
let result = JSON.parse(event.data)
this.autoComplete = result.shift();
this.myJson = result
this.selected = []
this.myJson.forEach((m, i) => {return this.selected.push({i: i, state: null})})
}
For the rest, I followed the same guidelines as Nikola, just adjusting the code I already had and implementing the suggestions.

Answer 1

If I understood you correctly maybe like following snippet:
const app = Vue.createApp({
data() {
return {
myJson: [{"1": 0.471, "2": {"82": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}}, {"1": 0.47, "2": {"686": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."}}],
selected: []
};
},
mounted() {
this.myJson.forEach((m, i) => {
return this.selected.push({i: i, state: null})
})
},
methods: {
setState(idx, state) {
this.selected[idx].state = state
}
}
})
app.mount('#demo')
.active {
background: gold !important;
}
.btn {
border-radius: 4px;
border: none;
padding: .5em 1em;
cursor: pointer;
}
.btn-1 {
background: lime;
}
.btn-2 {
background: crimson;
}
.btn:hover {
background: gold;
}
.fa {
color: white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<div id="demo">
<div v-for="(regList, idx) in myJson" :key="regList" class="container" >
<table>
<thead>
<tr>
<th>Documento</th>
<th colspan="2">Avalie a Busca</th>
</tr>
</thead>
<tbody>
<tr v-for="countryList in regList[2]" :key="countryList">
<td style="visibility: visible">
{{countryList}}
</td>
<td>
<button #click="setState(idx, true)" class="btn btn-1" :class="selected[idx]?.state && 'active'">
<i class="fa fa-thumbs-up"></i>
</button>
</td>
<td>
<button #click="setState(idx, false)" class="btn btn-2" :class="selected[idx]?.state === false && 'active'">
<i class="fa fa-thumbs-down"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
{{selected}}
</div>