CODEWITHSUNDEEP
vue.js
Wraith
Wraith

Reputation: 491

How change inputs type in VUE?

I have a input with type=radio

<div id="test">
    <div class="input-group mb-3" v-for="(input, k) in inputs" :key="k">
        <input type="radio" class="abc" disabled>
     </div>
</div>

How can on click button i can change all inputs with class="abc" from radio to checkbox

<script>
    var app = new Vue({
        el: "#test",
        methods: {
            changeInputType(e) {
                if (e.target.checked == true) {
                    alert('true');
                } else {
                    alert('false');
                }
            },
        }
    });
</script>

is any simple way to do this in this changeInputType function ?

Upvotes: -1

Views: 741

Answers (3)

Muhammad Hamza
Muhammad Hamza

Reputation: 31

On butt click change the type variable to checkbox.

<script>
    var app = new Vue({
        el: "#test",
        data() {
            return {
                input: 'radio'
            }
        },
        methods: {
            btnClick() {
                this.input = 'checkbox'
            },
        }
    });
</script>

Upvotes: 1

Usman
Usman

Reputation: 349

Here is the solution of your answer, By clicking on button all input types will be changed from radio to checkbox.

<div id="test">
        <div class="input-group mb-3" v-for="(input, k) in inputs" :key="k">
            <input :type="input" class="abc" disabled>
        </div>
        <div class="btn btn-sm" @click="changeInputType">Change Input Type</div>
</div>


<script>
    var app = new Vue({
        el: "#test",
        data() {
            return {
                inputs: ['radio', 'radio']
            }
        },
        methods: {
            changeInputType() {
                this.inputs = ['checkbox', 'checkbox']
            },
        }
    });
</script>

Upvotes: 1

captainskippah
captainskippah

Reputation: 1535

bind the input type to variable and change that variable

<template>
  <div>
    <input :type="inputType" />
    <button @click="changeType />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputType: "text",
    }
  },

  methods: {
    changeType() {
      if (this.inputType === "text") {
        this.inputType = "radio"
      } else {
        this.inputType = "text"
      }
    }
  }
}
</script>

Upvotes: 1

Related Questions