如何用 Vue 交换输入字段？

Posted 2023-02-23

【中文标题】如何用 Vue 交换输入字段？

【英文标题】：How to swap input fields with Vue?

【发布时间】：2021-03-23 03:45:04

【问题描述】：

当触发click 事件时，我难以交换字段。下面是我的代码，它只是更改了一次值和名称，但如果我再次单击它就不起作用。它也不会更改 v-model 值。谁能帮帮我？

html

<div id='app'>
      
  <button @click="swapInputFields">Swap</button>
  <input type="text" :name="[field1]" v-model="model1" :value="[fromCity]"><br>
  <input type="text" :name="[field2]" v-model="model2" :value="[toCity]">

</div>

Vue 代码：

var app = new Vue(
   el: '#app',
   data: 
      fromCity:'FROM',
      toCity :'TO',
      field1 :'name1',
      field2 :'name2'
   ,
   methods: 
      swapInputFields()
      
         this.fromCity = 'TO';
         this.toCity ='FROM';
         this.field1 = 'name2';
         this.field2 ='name1';
      
   
);

【问题讨论】：

存储 direction 变量可能更有意义，以表示它是从 -> 到或到 -> 从，而不是动态更改模型。

【参考方案1】：

从绑定中删除 [ ] 括号并从输入中删除除 type 和 v-model 之外的所有属性：

<button @click="swapInputFields">Swap</button>
<input type="text" v-model="fromCity"><br>
<input type="text" v-model="toCity">

您的数据中只需要那些模型变量fromCity 和toCity：

data() 
   return 
      fromCity:'FROM',
      toCity :'TO'
   
,

然后像这样交换它们：

swapInputFields()

   const temp = this.fromCity;
   this.fromCity = this.toCity;
   this.toCity = temp;

这是一个演示：

new Vue(
  el: "#app",
  data()
     return 
        fromCity:'FROM',
        toCity :'TO'
     
  ,
  methods: 
    swapInputFields()
    
      const temp = this.fromCity;
      this.fromCity = this.toCity;
      this.toCity = temp;
    
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="swapInputFields">Swap</button>
  <input type="text" v-model="fromCity"><br>
  <input type="text" v-model="toCity">
</div>