如何基于 AJAX 请求渲染VUE3组件?[已关闭]

xiozqbni  于 2023-04-07  发布在  Vue.js
关注(0)|答案(2)|浏览(178)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
7天前关闭
Improve this question
我想要一个autocomplete:https://www.npmjs.com/package/vue3-simple-typeahead的问题是,输入数据不能被修复,他们来自一个 AJAX 请求。但页面加载后,我似乎不能修改这些值。我正在阅读有关computedmountstore-但我很困惑。我以为我必须在ajax请求加载后呈现该元素。但如何?

xfb7svmp

xfb7svmp1#

但页面加载后,我似乎无法修改这些值
这似乎违背了Vue的基本思想,我并不是说所有第三方组件都能够处理所有属性的所有更改,但通常它们应该这样做。
在这个特殊的例子中,你只需要在 AJAX 请求完成后更新items属性。为此,在你将要管理ajax请求的父组件中将items定义为数据的一部分,并在ajax请求返回后更改items。
如果这不起作用,则可能是vue 3-simple-typeahead组件的限制(同样,我会非常惊讶)。但是如果组件确实是这样构建的-基本上项目必须预先给出-您可以在 AJAX 返回时销毁并重新创建vue 3-simple-typeahead示例。这可以通过将key属性绑定到状态变量来实现,例如,一个计数器。当你 AJAX 完成时,增加计数器。它会强制组件卸载并再次挂载,因为它的键已经改变了。

6mzjoqzu

6mzjoqzu2#

我认为你要做的是在加载组件时加载数据:

<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

相关问题