Question

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

如果填充了备用字段，如何禁用备用字段？例如，两个字段都以启用方式启动。但是，当我在字段1中输入内容时，应禁用字段2，反之亦然 - 因此用户只能使用其中一个字段，而不能同时使用两个字段。

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

Answer 1

这样的事情应该有效：

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

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

Answer 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

中查看此操作

首次填充Vue时禁用第二个输入

2 个答案: