根据输入文本，更改两个输入字段的背景颜色

Question

我正在使用bootstrap-vue显示模式。使用OPEN MODAL BUTTON打开模态后，它将显示两个输入字段。当我将文本添加到输入字段之一时，它会同时更改两个输入字段的颜色。是否有一种方法可以更改仅包含数据类型的字段的颜色？

查看

<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>

脚本

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;
    }

  }
})

这是我在jsfiddle上的代码

https://jsfiddle.net/ujjumaki/wgr3m6td/30/

Answer 1

是的，可以做一些改动。

首先，从数据中删除isChanged，并将其作为属性添加到每个list2对象，因此每个对象看起来都像这样：

{ text: "Your text", done: false, isChanged: false }

接下来，您的：style =“ isChanged？”应该改为：

:style="listings.isChanged ? "

接下来，您的v-on：input =“ gotText”应该将索引作为参数，例如：

v-on:input="gotText(index)"

最后，您的gotText方法应该接收索引并使用它来更新isChanged：

gotText(index) {
  this.list2[index].isChanged = !this.list2[index].isChanged
}

这应该可以回答您的问题，但是如果您希望更改某些行为，请问一下。