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，单击按钮时将其切换为true回到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

顺便说一句，您的小提琴无法正常工作...

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

1 个答案: