I'm confused about a simple issue. I have a table that fetches data from a JSON file, where each row represents a JSON field. In each row, I added two buttons (Like/Dislike) to assess the search quality. However, whenever I click on the like button on one row and then on another row, it doesn't keep the like selected on the first row.
The desired functionality is for the user to evaluate each line of data by choosing between like or dislike, and then saving this assessment.
Unfortunately, the evaluation options are not being retained for each line.
The code already incorporates integration with VUE.
Here's my HTML file:
<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>Document</th>
<th colspan="2">Rate Search</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>
https://i.sstatic.net/sHULR.png
EDIT 1
Nikola Pavicevic's solution seems suitable, but I need to provide more details about my code. My Vue file runs the project, where users enter a term, send it to the backend, receive a JSON response with autocomplete suggestions and information from another API. The frontend separates the autocomplete suggestion and displays the JSON information in a table format. The data shown in the table is just descriptive. Below is a model representing how the JSON populates the table.
VUE section:
<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>
JSON returned 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 Solved
Following Nikola's guidance, I managed to resolve the issues by making adjustments based on my specific requirements. Here's the modified code:
The ForEach loop had to be placed inside the Receive Text method since this is where my JSON data receives additional 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})})
}
I followed Nikola's advice for the remaining adjustments, tailoring them to my existing code while implementing the recommendations.