i am trying to run function when button is clicked.
and text box one value should display in div
Template code:
<input v-model="textdata" type="text" class="w-full rounded">
<div class="bg-white h-10 w-full ">{{textdata}}</div>
<button @click="getvalue" class="bg-green-800 rounded " >RECEIVE</button>
VUSJS:
<script>
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
function getvalue(){
console.log(this.textdata)
}
return{
getvalue,
}
}
})
</script>
Right now it's showing data in console, but how can i show same data on div.
You should define 2 refs and then update one of them from the other upon the click event
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const textarea = ref("");
const text = ref("");
function getvalue(){
this.text = this.textarea
}
return{
getvalue,
text,
textarea,
}
}
})
</script>
<template>
<input v-model="textarea" type="text" class="w-full rounded">
<div class="bg-white h-10 w-full">{{text}}</div>
<button @click="getvalue" class="bg-green-800 rounded " >RECEIVE</button>
</template>