Question

我想要的是禁用input并清空，如果 LEVEL2 输入为空，则 LEVEL3 和 LEVEL4 应该被禁用并且具有空值。

如果 LEVEL3 输入为空，则应禁用 LEVEL4 并且其值为空。

已禁用的代码正在工作，但该值仍然存在。我已经有这样的东西了：

<el-form-item :prop="'materialInfo.' + e_key + '.LEVEL2'" :rules="level2Rules" class="u_f_left">
  <span>-</span>
  <el-input v-model="e_val.LEVEL2" :value="e_val.LEVEL2" placeholder="階層2" class="wid70" @blur="joinLevel(e_key)" clearable></el-input>
</el-form-item>
 <el-form-item :prop="'materialInfo.' + e_key + '.LEVEL3'" :rules="level3Rules" class="u_f_left">
  <span>-</span>
  <el-input :disabled="e_val.LEVEL2?false:true" v-model="e_val.LEVEL3" :value="e_val.LEVEL3" placeholder="階層3" class="wid70" @blur="joinLevel(e_key)" clearable></el-input>
</el-form-item>
<el-form-item :prop="'materialInfo.' + e_key + '.LEVEL4'" :rules="level4Rules" class="u_f_left">
  <span>-</span>
  <el-input :disabled="e_val.LEVEL3?false:true" v-model="e_val.LEVEL4" :value="e_val.LEVEL4" placeholder="階層4" class="wid70" @blur="joinLevel(e_key)" clearable></el-input>
</el-form-item>

它是这样的：

我删除了 LEVEL2 的值，因此 LEVEL3 被禁用了。但是 LEVEL4 已启用，因为 LEVEL3 中仍然有价值。

因此，如果删除了LEVEL2值，我该怎么做才能删除 LEVEL3,4,5 的值。

如果 LEVEL3 为空，则删除 LEVEL4,5 。如果 LEVEL4 为空，则删除 LEVEL5 。

我试图像这样在v-model中放置条件：

<el-input :disabled="e_val.LEVEL2?false:true" v-model="e_val.LEVEL2?e_val.LEVEL3:EMPTYVALUE" :value="e_val.LEVEL3" placeholder="階層3" class="wid70" @blur="joinLevel(e_key)" clearable></el-input>

EMPTYVALUE被声明为EMPTYVALUE: '',。

但是好像出现了一些错误，无法编译。
如果可能的话，我也想避免使用blur或change events。

Answer 1

new Vue({
  el: "#app",
  data() {
    return {
      boxes: new Array(5),
    }
  },
  computed: {
    lastBox() {
      let lastBox = 0;
      for (let i = 0; i < this.boxes.length; i++) {
        if (this.boxes[i] && this.boxes[i].length && i == lastBox) {
          lastBox++;
        } else {
          this.boxes[i] = '';
        }
      }
      return lastBox;
    }
  }
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

input[type=text] {
  width: 50px;
  height: 30px;
  font-size: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-for="(item, index) in boxes" :key="index"
         v-model="boxes[index]" :disabled="index > lastBox" />
</div>

Answer 2

您可以执行以下操作：在每个输入上添加watch属性。

new Vue({
  el: "#app",
  data: {
      input: {
        one: "",
        two: "",
        three: "",
        four: ""
      }
  },
  watch: {
    input: {
      handler(val) {
        !val.one ? (this.input.two = "") : "";
        !val.two ? (this.input.three = "") : "";
        !val.three ? (this.input.four = "") : "";
      },
      deep: true
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <input type="text" v-model="input.one" placeholder="one" />
    <input type="text" v-model="input.two" placeholder="two" :disabled="!input.one" />
    <input type="text" v-model="input.three" placeholder="three" :disabled="!input.two" />
    <input type="text" v-model="input.four" placeholder="four" :disabled="!input.three" />
</div>

在Vue中禁用输入而清空输入值

2 个答案: