Empty the input value with disabled input in Vue

Question

What I want is to have the input disabled and emptied such that if LEVEL2 input is empty then LEVEL3 and LEVEL4 should be disabled and have empty value.

And if LEVEL3 input is empty then LEVEL4 should be disabled and have empty value.

The disabled code is working, but the value is still there. I already have something like this:

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

It goes like this:

I removed the value of LEVEL2, so LEVEL3 got disabled. But LEVEL4 is enabled since there's still value in LEVEL3.

So what can I do to remove the value of LEVEL3,4,5 if LEVEL2 value is removed.

And LEVEL4,5 removed, if LEVEL3 is empty. And LEVEL5 removed, if LEVEL4 is empty.

I tried putting conditions in v-model like this:

<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 is declared as EMPTYVALUE: '',.

But seems like I get some errors and won't compile.
And also I'd like to avoid using the blur or change events if that's possible.

Dan · Accepted Answer · 2020-04-03 06:35:32Z

2

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>

answered Apr 3, 2020 at 6:35

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Evan · Accepted Answer · 2020-04-03 06:43:17Z

You can do something like this: add watch property on each input.

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>

Collectives™ on Stack Overflow

Empty the input value with disabled input in Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related