Javascript 如何使用Vue交换输入字段？

当触发

单击

事件时，我很难交换字段。下面是我的代码，它只更改了一次值和名称，但如果再次单击，它将不起作用。它也不会更改

v型
值。有人能帮我吗

HTML


交换



Vue代码：

var-app=新的Vue({
el:“#应用程序”，
数据：{
fromCity:“FROM”，
toCity:“TO”，
字段1:'name1'，
字段2:“名称2”
},
方法：{
swapInputFields（）
{
this.fromCity='TO'；
this.toCity='FROM'；
this.field1='name2'；
this.field2='name1'；
}
}
});
从绑定中删除
[]
括号，并从输入中删除除
类型
和
v型
以外的所有属性：

交换



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

data（）{
返回{
fromCity:“FROM”，
toCity:‘TO’
}
},

然后像这样交换它们：

swapInputFields（）
{
const temp=this.fromCity；
this.fromCity=this.toCity；
this.toCity=temp；
}

下面是一个演示：


newvue({
el:“应用程序”，
数据（）{
返回{
fromCity:“FROM”，
toCity:‘TO’
}
},
方法：{
swapInputFields（）
{
const temp=this.fromCity；
this.fromCity=this.toCity；
this.toCity=temp；
}
}
});

交换


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