[Vuejs]-How change inputs type in VUE?

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>

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>

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>