Javascript 如何用拉威尔惯性Vue依赖下拉

在路由文件中，使用get方法定义loadCities路由:

 Route::get('/address/load-cities/{province_id}', [AddressController::class, 'loadCities'])->name('apps.address.loadCities');

在create.vue脚本中，更新loadCities方法以向正确的路由发出GET请求:

const loadCities = async () => {
    try {
        const response = await router.get(`/address/load-cities/${form.province_id}`); // Update the route
        cities.value = response.data;
    } catch (error) {
        console.error(error);
    }
}

您可以确保只有在 Select 了PROMENT_ID之后才调用loadCities函数.您可以通过监听多选组件上的输入事件来实现这一点.

<Multiselect v-model="form.province_id" :options="provinces" valueProp="id" label="name" trackBy="name" :searchable="true" placeholder="Select:" @input="handleProvinceChange" />

然后，在Vue组件中定义review ProvinceChange方法:

const handleProvinceChange = async () => {
    // Check if the province_id is not null or undefined
    if (form.province_id) {
        await loadCities(); // Call the loadCities function
    }
}

确保loadCities方法定义在AddressProvinceChange方法之上，以避免任何引用问题.

在Vue组件中，为form. province_id属性创建一个watcher:

watch: {
  'form.province_id': {
    immediate: true, // Call the handler immediately after the component is created
    handler(newProvinceId, oldProvinceId) {
      if (newProvinceId) {
        loadCities(); // Call the loadCities function when the province_id changes
      }
    }
  }
}