Vue on input text, changes background color for both input fields

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/

Thomas Bay · Accepted Answer · 2020-05-22 20:10:30Z

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.

edited May 22, 2020 at 20:10

answered May 22, 2020 at 19:35

Thomas Bay

6494 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

n-smits Over a year ago

On top of that, just a quick snipe on something I've noticed in the question code. Data should be a function which returns an object - otherwise you will be updating it across all components. As an example, try the buttons on vuejs.org/v2/guide/components.html#Reusing-Components (the first set of 3 is separated, the second set is not)

Thomas Bay Over a year ago

Good catch! Didn't notice this :)

Collectives™ on Stack Overflow

Vue on input text, changes background color for both input fields

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related