How change inputs type in VUE?

Question

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 ?

captainskippah · Accepted Answer · 2022-01-11 06:35:48Z

1

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>

answered Jan 11, 2022 at 6:35

captainskippah

1,59110 silver badges20 bronze badges

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

Comments

Usman · Accepted Answer · 2022-01-11 07:11:35Z

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>

Muhammad Hamza · Accepted Answer · 2022-01-11 12:03:58Z

1

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>

answered Jan 11, 2022 at 12:03

Muhammad Hamza

312 bronze badges

Collectives™ on Stack Overflow

How change inputs type in VUE?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related