bxeom
0
Original Question: Code to initialize the contents of the form How can I use options api grammar, which is the code below, as composition api grammar?
I'm using the following code in a form. How would I update it from Vue's Options API to the Composition API.
data: {
text: ""
},
methods:{
resetForm: function(e) {
e.preventDefault()
this.$data.text = ""
}
}
<script setup>
import { ref } from 'vue'
const text = ref('');
const resetForm = () => {
text.value = '';
}
</script>
<template>
<p>Text is: {{ text }}</p>
<input v-model="text" placeholder="edit me" />
<button @click="resetForm">
Reset Form
</button>
</template>
Or if you're doing separate files
export default {
setup() {
const text = ref('');
const resetForm = () => {
text.value = '';
};
return { text, resetForm };
}
}