es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Es el valor de $event personalizable?

30 Jul, 2023 Programación

Tengo un componente que escucha el valor de la selección del menú desplegable y lo muestra en un componente secundario. El problema es que el valor de $event es un número de identificación, y necesito una cadena que sea la misma que se muestra a través de ‘{{(type.name)}}’.

He cambiado el valor de entrada a type.name, pero esto causa problemas con otros componentes de la aplicación que dependen de que el valor sea un número de identificación.

¿Hay alguna manera de cambiar el valor que se captura, al valor de cadena que se interpola en {{(type.name)}}?

NOTA: Me han devuelto el objeto this.event, y el valor del texto de la selección no es una propiedad dentro de él.

PLANTILLA:

lang-html



MÉTODOS:

lang-js
methods: {
updateModel($event) {
this.storage_Selection.push($event);
this.$store.commit('addDocumentType', this.storage_Selection);
}
}

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una forma de resolver este problema es crear una propiedad computada separada que mapee el ID seleccionado con el nombre correspondiente. De esta manera, aún puedes usar el valor entero del ID para los componentes que dependen de él, al mismo tiempo que tienes acceso al valor de cadena para tu componente hijo.

    Aquí tienes un ejemplo:

    <template>
  <div>
    <b-select v-model="selectedId" @input="updateModel">
      <option v-for="type in types" :key="type.id" :value="type.id">{{ type.name }}</option>
    </b-select>
    <child-component :selectedtype="selectedType"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedId: null,
      types: [{ id: 1, name: 'Tipo A' }, { id: 2, name: 'Tipo B' }, { id: 3, name: 'Tipo C' }],
    }
  },
  computed: {
    selectedType() {
      return this.types.find(type => type.id === this.selectedId)?.name || null
    },
  },
  methods: {
    updateModel($event) {
      this.selectedId = $event
    },
  },
}
</script>

    En este ejemplo, creamos una propiedad computada llamada selectedType que utiliza el método find para mapear el valor selectedId con su correspondiente valor name en el arreglo types. Si no se encuentra ninguna coincidencia (es decir, selectedId es nulo), selectedType se establece en nulo por defecto.

    El método updateModel simplemente establece la propiedad de datos selectedId con el valor emitido por el componente b-select.

    Ahora, puedes pasar la propiedad computada selectedType a tu componente hijo en lugar del valor de ID sin procesar.

    Por supuesto, deberás adaptar este ejemplo para que se ajuste a tu caso de uso específico, pero espero que esto te dé una idea de cómo abordar el problema.

Comments are closed.