How to add or remove attribute on click in vue?

Question

Vue.js

the input has a readonly attribute.
I know to use @click="function name". I do not know how to refer to the attribute to change the value. how to change its value on click?

there is something like that

<template>
...
        <td><inputtype="text" :value="`${item.id}`" :readonly="readonly"></td>
        <td><button @click="attr_toggle">Toggle</button></td>
</template>

<script>
...
  data(){
    return{
      readonly: true
    }
  },
  methods:{
    attr_toggle(){
      this.readonly = !this.readonly;
    }
  },
</script>

Answer 1

set ref and refer to it?