My search bar retrieves data from an API query in the following format:
Data: [[id, datafield1, datafield2],[id, datafield1, datafield2],...]
I wish to include an on/off button for each row of the data, with each button having its own independent state. I plan to enhance its functionality later and prefer the appearance of v-btn, so I would like to stick with it if possible.
The code for the button is as follows:
<v-btn
color="primary"
variant="outlined"
@click="trackBill"
>{{ this.trackedBtnText }}</v-btn>The scripts are:
<script>
export default {
data: () => ({ bills: [], trackedBtnText: 'Track', tracked: false }),
methods: {
async showBills() {
this.bills = await showBills(this.keywords);
},
trackBill() {
this.tracked = !this.tracked;
this.trackedBtnText = this.tracked ? 'Tracked' : 'Track';
},
},
};
</script>Currently, when I click one button, the text changes on EVERY button. I am seeking a way to maintain individual variables for each function, as they will be involved in making API queries based on the retrieved data which may hold additional information later in development.