清空在Vue中具有禁用输入的值

Question

我想要的是使用空值禁用输入。就像如果LEVEL2输入为空，则LEVEL3和LEVEL4应该被禁用并且具有空值。如果LEVEL 3输入为空，则应禁用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>