I am writing the vuesax framework.
For input, the value value can only be obtained by using the v-model.
In my case, I have to use it in child-component.
If there is a v-model in child-component, is there a way to do two-way data-binding with parent-component?
https://lusaxweb.github.io/vuesax/components/input.html#size
child component
<template>
<div>
<vs-input type="text" v-model="input1" @input="$emit('update:input1', $event.target.value)" :value="input1" placeholder="input1"/>
<vs-input type="text" v-model="input2" @input="$emit('update:input2', $event.target.value)" :value="input2" placeholder="input2"/>
</div>
</template>
<script>
export default {
props: {
input1: {
type: String,
default: '',
},
input2: {
type: String,
default: '',
},
},
};
</script>
parent component
<template>
<div>
<form>
<Test2
v-model:inuput1="inuput1"
v-model:inuput2="inuput2"
/>
<div class="bottom" @click="handleSubmit">
<button>submit</button>
</div>
</form>
</div>
</template>
<script>
import Test2 from '@/Test/Test2.vue'
import { createPost } from '@/services/posts'
import { ref } from "vue";
export default {
components: { Test2 },
setup() {
const inuput1 = ref("");
const inuput2 = ref("");
return { inuput1, inuput2 };
},
inject: ['GStore'],
data() {
return {
userData: this.GStore.session,
}
},
methods: {
handleSubmit(e) {
e.preventDefault()
const id = this.userData.id
const formdata = new FormData()
formdata.append('userId', id)
formdata.append('inuput1', this.inuput1)
formdata.append('inuput2', this.inuput2)
if (this.mainoutput) formdata.append("image", this.mainoutput);
this.$el.querySelector('button').classList.add('is-loading')
createPost(formdata).then((res) => {
res.user.name = this.userData.name
this.$el.querySelector('button').classList.remove('is-loading')
this.$router.push({path:'/profile'})
})
},
},
}
</script>