Custom form field

[rokkay]

Hello, im trying to do a two custom form fields for categories and subcategories in which one of them depends on the other. Im doing this with axios and get method, all fine but when i select the value on the second select the array of values disappear until i select a new subcategory.

Explanation in gif

This is my code:

SharpFormSelectCategoriesField.vue

<template>
  <div>
    <select class="SharpText multiselect" @change="handleChanged" :value="categoriaSeleccionada">
      <option v-for="(categoria, index) in categorias" 
      :key="`categoria-${index}`" 
      :value="`${index}`">
      {{categoria}}
      </option>
    </select>
  </div>
</template>
<script>
import { EventBus } from '../sharp-plugin.js';
export default {
  props: {
    categorias: Array,
    categoriaSeleccionada: String
  },
  mounted() {
      EventBus.$emit("categoria", this.categoriaSeleccionada);
  },
  methods: {
    handleChanged(e) {
      this.$emit("input", e.target.value);
      EventBus.$emit("categoria", e.target.value);
    }
  }
};
</script>

SharpFormSelectSubcategoryField.vue

<template>
  <div>
    <select class="SharpText multiselect" @change="handleChanged" :value="subcategoriaSeleccionada">
      <option v-for="(subcategoria, index) in subcategorias" 
      :value="`${index}`" 
      :key="`subcategoria-${index}`">
      {{subcategoria}}
      </option>
    </select>
  </div>
</template>
<script>
import { EventBus } from '../sharp-plugin.js';
window.axios = require('axios');
export default {
  props: {
    subcategorias: Array,
    subcategoriaSeleccionada: String
  },
  created () {
    EventBus.$on('categoria', idCategoria => {
      console.log(`Categoria: ${idCategoria}`);
      axios.get(`http://test.mtkadventure/api/subcategorias/${idCategoria}`)
      .then(response => (this.subcategorias = response.data));
    });
  },
  methods: {
    handleChanged(e) {
      this.$emit("input", e.target.value);
      console.log(this.subcategorias);
    }
  }
};
</script>

If i comment the this.$emit("input", e.target.value); on the subcategory select this not happens, but the form data cannot be updated. Is this a bug or i need a break? Is there a better way to achive this?

Thanks in advance and excuse me if im being so tedioud but i really like Sharp and want to dominate it.

[aguingand]

The value of the field must be a prop named value see the doc.

[rokkay]

Thanks for answering but I have changed the prop and the same thing is still happening.

[dvlpp]

I'll let @aguingand reply on this topic, but nevertheless, have you considered using a regular autocomplete with a remote endpoint accessed from the back directly on the subcategories (implementing a good search)? I think I've done this before:

[rokkay]

Thanks for the alternative. At first I thought about using that but depending on the subcategories of the selected category I need the id of the selected category to get the subcategories of that category.

[aguingand]

I can't reproduce the issue with a select inside a custom field. Please provide a reproduction repo (of the sharp plugin).

[dvlpp]

What is the status ouf this issue? Did you find a way to do that @rokkay?

[rokkay]

Sorry guys, i've been working on other projects, its all solved. At first i did that you told me, but client decided to remove subcategories so no problem.

[dvlpp]

Note that we are going to merge very soon a new feature which is very much linked to this: https://github.com/code16/sharp/blob/feature/dynamic-attributes/docs/form-fields/select.md#setoptionslinkedtostring-fieldkeys (also for Autocompletes: https://github.com/code16/sharp/blob/feature/dynamic-attributes/docs/form-fields/autocomplete.md#setlocalvalueslinkedtostring-fieldkeys)