CODEWITHSUNDEEP
javascriptvue.jsvuejs2
maryyyyyyy
maryyyyyyy

Reputation: 127

Empty the input value with disabled input in Vue

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:
enter image description here

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.

Upvotes: 1

Views: 1323

Answers (2)

Evan
Evan

Reputation: 2507

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>

Upvotes: 1

Dan
Dan

Reputation: 63129

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>

Upvotes: 2

Related Questions