在同一组件的多个实例中不工作的Vue3绑定和刷新

Question

我在一个列表中有多个相同组件的实例(实际上，在一个v-for数组中)。不管我放置这些实例的顺序如何，它始终是列表中显示数据的第一个实例(数据是在内部使用来自不同端点的useLazyFetch加载到组件中的)。我复制了组件代码并将其重命名，然后“工作”(例如，每个组件实例正确地提取数据)。onMounted被调用，但是refresh不触发useLazyFetch (没有发生网络请求)。加载后在组件中使用“筛选器”时，稍后会调用刷新，但绑定在后续组件中不起作用。

在Nuxt/vite/vue中，它以某种方式缓存了组件，这让人觉得有些奇怪，但据我所读，您必须显式缓存。

父组件：

<template>
    <div class="bg-white shadow-lg rounded-sm border border-slate-200 p-5 min-w-fit h-fit">
      <div v-for="(filter, ix) in listFilters" :key="ix"> 
        <ListFilter :id="ix" :filter-type="filter.type" :filter-endpoint="filter.endpoint" :endpoint="props.endpoint" @trigger-filter-change="handleChildFilter" @filter-change="onChildFilterChange"/>
      </div>
    </div>
</template>

<script setup>

  const router = useRouter()
  const runtimeConfig = useRuntimeConfig();

  const emit = defineEmits(['filterChange', 'triggerFilterChange'])

  const listFilters = ref([
    {type: 'Medium', endpoint: 'media'}, {type: 'Support', endpoint: 'supports'}, { type: 'Pigment', endpoint: 'pigments'}, 
  ])
</script>

儿童部分：

<template>
    
        <!-- Group 3 -->
        <div :id="props.filterType">
          <div class="flex flex-row justify-between items-center">
            <span class="text-sm text-slate-800 font-semibold mb-3">
              {{props.filterType}}
            </span>
            <span class="mb-3"><SmallSpinner v-if="pending"/></span>
          </div>
          <form class="relative mb-3">
            <label for="profile-search" class="sr-only">Search</label>
            <input class="form-input w-full pl-9 focus:border-slate-300" type="search" placeholder="Filter..." v-model="filterText"/>
            <button class="absolute inset-0 right-auto group" type="submit" aria-label="Search">
              <svg class="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
                <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
              </svg>
            </button>
          </form>

         
          <ul :id="`list_` + props.filterType">
           
           <li v-for="(f, index) in listFilters" :key="f.id">
              <label class="flex items-center" v-if="index < 30">
                <input type="checkbox" class="form-checkbox" :id="f.id" :value="f.id" v-model="selectedIds" />
                <span class="text-sm text-slate-600 ml-2">{{f.filter_name}}</span>
              </label>
              <span v-if="index == 31">
                ...
              </span>
            </li>
          </ul>
        </div>
       
</template>

<script setup>
  import {vAutoAnimate } from '@formkit/auto-animate'
  const router = useRouter()
  const runtimeConfig = useRuntimeConfig();

  const emit = defineEmits(['filterChange', 'triggerFilterChange'])

  const listFilters = ref([])
  const selectedIds = ref([])
  const urlQueryString = ref('')  
  const filters = ref([])
  const filterText = ref('')
  
  const uniqueId = Math.random().toString(8).slice(2)

  const props = defineProps({
    endpoint: String,
    filterEndpoint: String,
    filterType: String,
    appliedFilters: String
   })

  const timeout = ref(null)

  const {data, error, pending, refresh } = await useLazyFetch(() => {
    return `${props.endpoint}/${props.filterEndpoint}?${props.appliedFilters == undefined ? "" : props.appliedFilters}${urlQueryString.value}&id=${uniqueId}`
  }, { baseURL: runtimeConfig.public.baseURL, headers:{'Allow-Control-Allow-Origin': '*'} } )


  watch(data, (newData) => {
    console.log("LISTFILTER")
    console.log(data.value)
    
    if(data.value) {
        //console.log(data.value[props.filterType].length)
        console.log("Setting data to lFilters")
        listFilters.value = data.value[props.filterType]
    }
  })

  const triggerFilterChange = (filter) => {
    if (props.filterType == filter.type) {
      const ix = selectedIds.value.indexOf(filter.id)
      if (ix !== -1) {
        selectedIds.value.splice(ix, 1)
        emitFilterChange()
      }
    }  
  }

  onMounted(async () => {    
    // send the trigger to the parent.
    console.log("On Before mount")
    console.log(props.filterEndpoint)
    await refresh()
    emit('triggerFilterChange', { type: props.filterType, fn: triggerFilterChange} )
    
  })
</script>

Answer 1

事实证明，我遇到的绑定问题和缺少的网络调用都是由于没有在useLazyFetch方法上提供一个useLazyFetch。

const {data, error, pending, refresh } = await useLazyFetch(() => {
    return `some_endpoint`
  }, { baseURL: runtimeConfig.public.baseURL, headers:{'Allow-Control-Allow-Origin': '*'}, key: `my-unique-id` } )

否则，将根据文件名生成密钥。