Vue.js 在Vue中填充第一个输入时禁用第二个输入

我有一个表单，有两个输入字段

当一个字段已填充时，如何禁用备用字段？例如，这两个字段都以启用状态开始。但是，当我在字段1中输入内容时，字段2应该被禁用，反之亦然——因此用户只能使用其中一个字段，而不能同时使用两个字段

---

在jQuery中，我使用了keyup事件，检查了生成事件的字段的长度（>0），并禁用了另一个字段。同样，对于另一个字段。在Vue中，我不知道如何引用另一个字段，使用：disable=“true”禁用它。

类似的方法应该可以：

<input type="text" v-model="firstField" :disabled="!!secondField" />
<input type="text" v-model="secondField" :disabled="!!firstField" />

---

这假设您对

firstField

和

secondField

都有

data

属性

<div id="app">
   <input type="text" v-model="text1" :disabled="shouldDisable1" @keyup="disable('second')">
  <input type="text" v-model="text2" :disabled="shouldDisable2" @keyup="disable('first')">
</div>

new Vue({
  el: "#app",
  data: {
    text1: '',
    text2: '',
    shouldDisable1: false,
    shouldDisable2: false
  },
    methods: {
    disable(input) {
        if(input == 'first') {
        this.shouldDisable1 = true
        if (this.text2 == '') this.shouldDisable1 = false
      }else {
        this.shouldDisable2 = true
        if (this.text1 == '') this.shouldDisable2 = false
      }
    }
  }
})

新Vue({
el:“应用程序”，
数据：{
文本1:“”，
文本2:“”，
应该禁用1：错误，
应该禁用2：错误
},
方法：{
禁用（输入）{
如果（输入=‘第一’）{
this.shouldDisable1=true
如果（this.text2=''）this.shouldDisable1=false
}否则{
this.shouldDisable2=true
如果（this.text1=''）this.shouldDisable2=false
}
}
}
})

---

请参见

中的操作，这将禁用这两个字段。加载时，应启用这两个字段。如何“初始化”这个？我做了一个编辑；将

：disabled

属性强制为布尔值似乎已经达到了目的。我刚刚测试过它，它似乎工作正常。我不确定我是否完全理解它是如何工作的。让我考虑一下。真的是这样吗：只需两次翻转第二个字段，然后再两次翻转第一个字段，因为。。。嗯…很乐意帮忙。如果第二个字段具有“truthy”值（即，如果它不是空的），则第一个元素上的

disabled

属性将被激活。如果第二个字段为空，它将有一个“falsy”值，因此第一个元素的“disabled”属性将被停用。第二个元素也是如此。非常感谢约翰，你太棒了！感谢roli提供了另一种方式来实现这一点，这就是将像我这样的新手更容易理解的功能公开给Vue。非常感谢！我认为约翰的回答是可以接受的，因为他先回答了。希望这很酷。谢谢。约翰的答案更好更简短。但我想给你展示一种替代方法。最佳实践请遵循约翰的答案。