单击删除按钮时，Vue 更改输入字段的颜色

Question

我是 vue js 的新手，我想在用户单击 trash-fill button 时更改输入字段的颜色。目前，当我在输入字段上载一个字符时，它会将颜色更改为绿色。

当用户点击 <b-icon icon="trash-fill" font-scale="1.5" @click="deleteRfidBeforeReload($event, index, 10)"></b-icon> 时，是否可以将输入字段的颜色从绿色更改为白色？

查看

<div id="app">
  <div v-for="(listings, index) in list10" :key="index">
   <b-row>
     <b-col sm="6">
       <b-form-input id="input-live" :value="listings.first_name" disabled></b-form-input>
     </b-col>
     <b-col sm="4">
       <b-form-input v-model="listings.rfidState1" ref="todos" v-on:input="posttorfidapi($event, 10, index)" 
:style="listings.rfidState1 ? { 'background-color': '#33FF90', color:'#33FF90' } : null"></b-form-input>
     </b-col>
      <b-col sm="2">
        <b-icon icon="trash-fill" font-scale="1.5" @click="deleteRfidBeforeReload($event, index, 10)"></b-icon>
      </b-col>
    </b-row>
  </div>
</div>

脚本

new Vue({
  el: "#app",
  data: {
    list10: [
      { first_name: "mission1", id: "1", rfidState1:""},
      { first_name: "mission2", id: "2", rfidState1:""},
      { first_name: "mission3", id: "3", rfidState1:""},
      { first_name: "mission4", id: "4", rfidState1:""}
    ]
  },
  methods: {
    posttorfidapi(event, col, index){
        if(event.length > 3){
        console.log("CHANGE INPUT FIELD COLOR TO GREEN");
      }
    },
    deleteRfidBeforeReload($event, index, col){
        console.log(index);
      console.log("CHANGE THE PARTICULAR INPUT FIELD TO WHITE AGAIN");
    }
  }
})

我在 JSFIDDLE 上的代码

https://jsfiddle.net/ujjumaki/7qsnvftm/17/

Answer 1

我看到你在使用三元运算符。您可以在数组中的对象中引入一个新的属性，我们会切换 true 或 false，例如 whiteBackground，当单击按钮并返回 false，当输入更改时（我假设这就是您想要的）。然后你可以将它作为一个进一步的三元运算符嵌套到你已经存在的运算符中。所以我建议如下：

  list10: [
    {
      first_name: "mission1",
      id: "1",
      rfidState1: "",
      whiteBackground: false
    },
    //...
  ]

方法：

posttorfidapi(event, col, index) {
    this.list10[index].whiteBackground = false;
    console.log("CHANGE INPUT FIELD COLOR TO GREEN");
  }
},
deleteRfidBeforeReload($event, index, col) {
  this.list10[index].whiteBackground = true;
  console.log("CHANGE THE PARTICULAR INPUT FIELD TO WHITE AGAIN");
}

和三元条件：

:style="listings.rfidState1 ? listings.whiteBackground ? '' : 
   { 'background-color': '#33FF90', color:'#33FF90' }  : ''"

CODESANDBOX

顺便说一句，你的 fiddle 不工作...

单击删除按钮时，Vue 更改输入字段的颜色

Vue change color of input field when clicked delete button

javascript

vue.js

bootstrap-vue