Vue 在输入文本上，更改两个输入字段的背景颜色

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
}

这应该可以回答您的问题，但如果您想改变某些行为，请提出要求。

编辑：正如 n-smits 所建议的那样，vue 实例中的数据不应该是一个对象，而是一个 returns 像这样的对象的函数：

data(){
  return {
    list2: [..]
  }
}

我建议您阅读他的评论以了解为什么这是必要的。

Vue 在输入文本上，更改两个输入字段的背景颜色

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

dom-events

vue.js

bootstrap-vue