1
I found the solution. What I did was I emitted a Boolean value from child component. That value is initially false. When a button is clicked in child component, it is converted into true and sent to the parent component. In parent component, I used method instead of setup, to fetch the data using fetch function ( I took it out of setup and placed it in methods only ) when the Boolean value received from the child component is true. I used async functions and await to make it smooth like when api display only when api is called and meanwhile wait for it.
1
computed can track ref change.
here is example.
type aaaa input field.
const { createApp, ref, computed } = Vue
createApp({
setup() {
const value = ref('')
const userList = [{ user: 'aaaa' }, { user: 'bbbb' }]
const user = computed(() => userList.find((el) => el.user === value.value))
return {
value,
user,
}
}
}).mount('#app')<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<input v-model="value" />
{{ user }}
</div>0
In plain js you could create a Proxy and make it execute code on change.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy