[Vuejs]-Buttons generated via JavaScript do not call functions in VueJS

by

1👍

Oh, if you really want to create the elements manually in Vue, you need to use the render() function. However, while there are practical applications for it, I am pretty sure it would serve you better to write your example in the regular Vue style, where you separate between template and data operations, as it gives you cleaner code that is easier to maintain.

In the template, you can express the exact same DOM operations you did above, using v-if to show and hide the loading spinner and using v-for to create the buttons from the list:

<div v-if="loading" id="spinnerGetProj"/>
<div v-else v-for="item in projects" :key="item">
  <button
    type="button"
    class="btn btn-primary mt-4"
    @click="loadFromDeta(item)"
  >{ item }</button>
</div>

You didn’t say which Vue version you are using, but in Vue 3 composition api, the corresponding script part would look something like this:

const projects = ref([])
const loading = ref(true)

const loadProjects = async() => {
  loading.value = true
  projects.value = await detaStorage.getAllProjects()
  loading.value = false
}

And that’s it. Now you just have to call loadProjects(), and everything else falls into place. Hope that helps.

👤Moritz Ringler

Leave a comment