Vue on input text, changes background color for both input fields - vue.js

Question

I am using bootstrap-vue to display modal. Once the modal is opened using OPEN MODAL BUTTON, it displays two input fields. When I add a text to one of the input field, it changes color on both input fields. Is there a way to change color for the field which consists of datatype only?
View
<div id="app">
<b-modal id="modal-center" ref="modalRef" centered title="DISPLAY MODAL" v-bind:hide-footer="true">
<b-row class="my-1">
<b-col sm="11">
<div v-for="(listings, index) in list2" :key="index">
<br/>
<b-form-input v-model="listings.rfidState1" placeholder="insert text" v-on:input="gotText()" :style="isChanged ? { 'background-color': '#33FF90' } : null" ></b-form-input>
</div>
</b-col>
</b-row>
<br/>
<b-row>
<b-col><b-button block variant="info" v-on:click="hidemodal();">UPDATE</b-button></b-col>
<br/>
</b-row>
<br/>
</b-modal>
<b-button block v-b-modal.modal-center variant="info">OPEN MODAL</b-button>
</div>
Script
new Vue({
el: "#app",
data: {
list2: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false }
],
isChanged: false
},
methods: {
hidemodal(){
this.$refs['modalRef'].hide()
},
gotText(){
this.isChanged = !this.isChanged;
}
}
})
Here is my code on jsfiddle
https://jsfiddle.net/ujjumaki/wgr3m6td/30/

Answer 1

Yes this can be done with a few changes.
First, remove isChanged from your data, and add it as a property to each of your list2 objects, so each object looks like this:
{ text: "Your text", done: false, isChanged: false }
next, your :style="isChanged ? ", should instead be:
:style="listings.isChanged ? "
next up, your v-on:input="gotText" should take the index as a parameter like so:
v-on:input="gotText(index)"
last, your gotText method should receive the index and use it to update isChanged:
gotText(index) {
this.list2[index].isChanged = !this.list2[index].isChanged
}
This should answer your question, but if you want some of the behaviour changed ask away.
Edit:
As suggested by n-smits, your data in the vue instance should not be an object, but a function that returns an object like this:
data(){
return {
list2: [..]
}
}
I recommend that you read his comment to understand why this is necessary.