I'm currently working on implementing a follow button for list items in Vue. My approach involves extracting the value of a specific property from a list item and storing it in the data object. Then, I plan to utilize this value within a method to append it to an array in my database.
<div v-for="result in results" :key="result.symbol">
{{ result.name }}
<button @click="followStock(result.symbol)">+ Follow</button>
</div>
My challenge lies in figuring out how to pass the value of `result.symbol` into the button element in order to set the `symbol` value in the data object below.
<script>
export default {
data() {
return {
results: [ // fetched from API
{
currency: "USD",
exchangeShortName: "NYSE",
name: "International Game Technology PLC",
stockExchange: "NYSE",
symbol: "IGT"
},
{...},
...
],
symbol: "",
};
},
methods: {
followStock(symbol) {
// add symbol to database array
},
},
};
</script>
I believe there could be a simpler solution that I may have overlooked since I am still new to Vue. Any alternative approach allowing me to send the value of `result.symbol` from any rendered result to my database would be greatly appreciated.