Search code examples
formsvue.jsnuxt3.js

vueForm , issue with loading select element items inside list dynamically base on sibling select element

iam using vueForm https://vueform.com/ in nuxt3

i have the following schema for a list with 2 select elements that need to be connected (country-city connection) , I need to load the correct list of cities through an API based on the country that the user selects

image

the problem is that I can't connect it to the current index I can add this: items:"myApi?country={location.0.country}" but how can i achieve this items:"myApi?country={location.<index>.country}"

 location: {
    type: "list",
    element: {
      type: "object",
      schema: {
        country: {
          columns: {
            container: 6,
          },
          type: "select",
          placeholder: "Country",
          closeOnSelect: true,
          items: [
            {
              value: "country1",
              label: "Country 1",
            },
            {
              value: "country2",
              label: "Country 2",
            },
          ],
          search: true,
          native: false,
          inputType: "search",
          autocomplete: "off",
          floating: false,
        },
        city: {
          columns: {
            container: 6,
          },
          type: "select",
          placeholder: "City",
          closeOnSelect: true,
          items:"myApi?country={location.0.country}",
          search: true,
          native: false,
          inputType: "search",
          autocomplete: "off",
          floating: false,
        },
      },
    },
    addText: "Add another",
    initial: 1,
    min: 1,
    max: 15,
  },

notes :

  1. i did try adding onchage function to the select to change the items manually but i couldn't find a working solution doing that and i faced challenges trying to separate the items of each child it connects them somehow together
      onChange: (val, _, form) => {
        form.el$.children$[0].schema.city.items = [
          {
            'value': 0,
            'label': 'val',
          },
          {
            'value': 1,
            'label': 'val',
          },
        ];
      },
  1. the following 2 doesn't help as those are not siblings inside list
    https://vueform.com/recipes/dynamically-load-options-to-chained-select-boxes-with-async-functions and https://vueform.com/recipes/dynamically-load-options-to-chained-select-boxes-from-endpoint
Solution

  • update , this works when using items:"myApi?country={location.*.country}"