Question 52850 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to render a VUE3 component based on Ajax request? – Javascript

I want to have an autocomplete: https://www.npmjs.com/package/vue3-simple-typeahead the problem is, input datas cant be fixed, they come from an ajax request. But after page loaded, I cant seem to be able to modify those values. I was reading about computed, mount, store – but im so confused.
I thought I have to render that element after the ajax request is loaded. But how to?

Tags:

2

Answers


  1. 0

    But after page loaded, I cant seem to be able to modify those values

    This seems to be going against the basic idea of Vue. I am not saying all 3rd party components are able to handle all the changes to all their properties, but usually they should.

    In this particular case, you just need to update the items property once your ajax request completes. In order to do that, define the items as part of the data in the parent component where you will be managing your ajax request, and change the items once ajax request returns.

    If that does not work, it is probably a limitation of the vue3-simple-typeahead component (again, I will be very surprised). But in case the component is indeed built this way – basically the items must be given upfront – you can destroy and recreate the vue3-simple-typeahead instance when your ajax returns. This is doable by binding the key property to a state variable, e.g. a counter. And when your ajax finishes, increase the counter. It will force the component to unmount and mount again because its key has changed.

    Login or Signup to reply.
  2. 0

    I think what you are trying to do is load the data when the component is load:

    <template>
  <Dropdown :items="data" />
</template>
<script>
import { defineComponent, onMounted, ref } from 'vue'

export default defineComponent({
  setup() {
    const data = ref()

    async function loadYourData() {
       //load data
       data.value = your-data-get-from-api
    }

    onMounted(async () => {
      await loadYourData()
    }

    return {
      data,
    }
  }
})
</script>

    See lifecycle hooks for more details

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search