Componente de envoltura personalizado con propulsores y v-model

Estoy usando el vue-select biblioteca: https://github.com/desislavsd/vue-select en mi aplicación.

Desde Estoy usando muchos de ellos sólo quiero hacer un componente de envoltura separado, pero ahora mis selecciones no funcionan. Vue de alguna manera no reconoce la propina. ¿Cómo puedo hacer mi v-select un componente reutilizable separado que puede aceptar que es props y worK normales?

Este es mi componente Select:

Y así es como lo estoy usando:



export default {
  name: "Admin",
  components: {
    Header,
    Select
  },
  data() {
    return {
      value1: [],
      selected: {
       role: ''
      },
      roles: [
        { role: "Assesors" },
        { role: "Finance" },
        { role: "Sales" }
      ]
    };
  }
};

Pregunta hecha hace 3 años, 4 meses, 25 días - Por devepicenter

3 Respuestas:

  • Esto es más complejo de lo que parece. Usted espera que los propulsores pasan al componente personalizado para ser aplicado al interior v-select pero Vue no lo sabe. Alguien más podría esperar que ellos vayan en el

    .

    v-bind="$attrs"

    Las prótesis no se transmiten automáticamente a un elemento infantil. Para hacerlo, necesitas:

    v-model

    Ahora las propulsiones se aplican al elemento que elija. Pero... v-model es un prop especial del padre con funcionalidad oculta, no se pasa correctamente sin alguna preparación adicional. Tendrás que codificar una v-model directamente sobre el niño:

    Computed setter

    El padre v-model pasa por un value prop. Crear una fuente computada en el elemento personalizado (lo estoy llamando) model) para usar con el niño v-model:

    computed: {
  model: {
    get() { return this.$attrs.value },
    set(val) { this.$emit('input', val) }
  }
}

    Aquí está el actualizada demo con un componente de envoltura personalizado selected y as="role::role"

    Respondida el Dec 20, 2020 a las 08:53 - por nodenomad

    Votos positivos: 0 | Votos negativos: 0

  • El problema principal que veo en tu código es que estás utilizando la etiqueta <select> en lugar de <v-select> en tu componente Select y también estás pasando las propiedades de manera incorrecta. Aquí te dejo cómo puedes corregirlo:

    • En tu componente `Select`, debes utilizar `` en lugar de simplemente `

  • El problema es que estás usando v-select sin ningún nombre de componente. Esto significa que Vue no sabe qué componente usar para representar el elemento v-select. Para solucionarlo, debes especificar el nombre del componente en el elemento v-select.

    Aquí tienes un ejemplo de cómo se vería tu componente Select después de la corrección:

    html

    Y tu componente de uso:

    html

    Esto debería permitir que tu componente Select funcione correctamente como un componente reutilizable.

    Respondida el Dec 21, 2020 a las 08:57 - por Gemini

    Votos positivos: 0 | Votos negativos: 0