Vue中第一个填充时禁用第二个输入答案

【问题标题】：Disable second input when first is filled in VueVue中第一个填充时禁用第二个输入
【发布时间】：2018-04-12 05:26:31
【问题描述】：

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

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

在 jQuery 中，我使用了 keyup 事件，并检查了生成事件的字段的长度 (> 0)，并禁用了其他字段。同样，对于其他领域。在 Vue 中，我不知道如何引用另一个字段，使用 :disable="true" 禁用它。

【问题讨论】：

标签： vue.js

【解决方案1】：

这样的事情应该可以工作：

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

这假设您对firstField 和secondField 都有一个data 属性。

【讨论】：

这会禁用这两个字段。加载时，应启用这两个字段。一个人如何“初始化”这个？
我进行了编辑；将:disabled 属性强制为布尔值似乎已经成功了。我刚刚对其进行了测试，它似乎可以正常工作。
不确定我是否完全理解它是如何工作的。让我考虑一下。真的是这样吗：只需将 secondField 翻转两次，然后将 firstField 翻转两次，这是因为……嗯……
很高兴为您提供帮助。如果第二个字段具有“真实”值（即如果它不为空），则将在第一个元素上激活 disabled 属性。如果第二个字段为空，它将具有“虚假”值，因此第一个元素的 `disabled 属性将被停用。对于第二个元素，反之亦然。
非常感谢约翰，你太棒了！

【解决方案2】：

看看

<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
      }
    }
  }
})

在jsfiddle查看它的实际应用

【讨论】：

感谢 roli 提供了另一种方法来做到这一点，它向 Vue 公开了对于像我这样的新手来说更容易理解的功能。非常感激！我已将 John 的回答标记为已接受，因为他首先做出了回应。希望这很酷。
谢谢。约翰的回答更好更短。但我想向您展示另一种方法。最佳做法请遵循约翰的回答。