Clear the disabled input value in VueJS

Question

Clear the disabled input value in VueJS

My goal is to have the input disabled and empty. If the LEVEL2 input is empty, then both LEVEL3 and LEVEL4 should also be disabled and empty.

If the LEVEL3 input is empty, then LEVEL4 should be disabled and empty.

The disabled code is functioning properly, but the value still remains. The current code looks 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="Level 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="Level 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="Level 4" class="wid70" @blur="joinLevel(e_key)" clearable></el-input>
</el-form-item>

A screenshot of how it currently behaves can be seen here.

I've tried adjusting the conditions in the v-model, like so:

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

The variable EMPTYVALUE is defined as EMPTYVALUE: '',.

However, I encountered some errors when trying this method and it did not compile successfully. Additionally, I would prefer to avoid using the blur or change events if possible.

javascript vue.js vuejs2

Answer 1

Answer №1

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

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 > lastFilledBox" />
</div>

Answer 2

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

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 > lastFilledBox" />
</div>

Answer 3

Answer №2

If you want to achieve a similar functionality, you can use the following approach: include a watch feature on each input element.

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>

Answer 4

If you want to achieve a similar functionality, you can use the following approach: include a watch feature on each input element.

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>

Clear the disabled input value in VueJS

Answer №1

Answer №2

Similar questions

Refresh component when mobx store is modified

Is it necessary to specify a data type for the response when making an AJAX POST request?

Navigating between functions in JavaScriptBy switching from one function to another

Implementing dynamic checkbox values depending on a selection from a dropdown menu in Angular

Developing mobile-friendly applications with AngularJS, incorporating ngTouch into directives

Deactivating choices in Autoselect from Material UI

What is the best way to retrieve user input from a form within an Ajax.ActionLink?

JavaScript conditional using only conditions with ampersand operators that will evaluate only the first half of

Error arises when using ODBC PDO alongside Ajax functionality

Retrieve content from the pushState state object

In React Router version 4, it is stated that each router is only allowed to have a single child element when using multiple routes

Issue with updating AngularJS model within nested ng-repeat block

javascript change string into an array of objects

Can a client component in NextJs retrieve data from a server component?

What is the best way to combine two arrays using Mongoose?

Vue.js compatibility issue with SelectBoxIt jq plugin causing malfunction

Storing objects in localStorage using VueJS

Localhost server experiencing issues with uploading files through Express framework

Accessing a Kendo Grid instance within an Angular directive

Sending state data in an Axios POST request