[Vuejs]-Dynamically fetch data in parent component when new data is added in child component in Vue without using watcher

by

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.

👤Ojas Aklecha

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>
👤leteu

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

👤SneakyLenny

Leave a comment