1

Me gustaría saber si conocen una forma de pasar una variable hacia un slot, ésta sea reactiva.

Componente ViewHeader.vue

<template>
    <div>
        <slot name="izquierda"></slot>
        <slot name="centro"></slot>
        <slot name="derecha"></slot>
    </div>
</template>

Componente Padre Dashboard.vue

<template>
    <div>
        <view-header>
            <template v-slot:derecha>
                <button v-if="esCreacion">Crear</button>
                <button v-else>Editar</button>
            </template>
        </view-header>
    </div>
</template>

Por lo tanto, mi intención es que si en el padre cambia la variable esCreacion, el botón cambie de texto de Crear a Editar.

El tema es que al montar el componente toma la variable en su estado inicial (true), pero cuando cambia a false, el botón no cambia de texto.

¿Saben cómo hacer que la variable ingresada al slot sea reactiva?

1

1 respuesta 1

1

De acuerdo a tus templates tu no estás pasando una variable como tal a ningún slot del componente hijo al que te refieres, solamente estás pasando contenido de slot de acuerdo a una variable del componente padre, entonces funcionaría así:

Vue.component('view-header', {
  template: `
    <div>
      <slot name="izquierda"></slot>
      <slot name="centro"></slot>
      <slot name="derecha"></slot>
    </div>
  `
})

new Vue({
  el: '#app',
  data: {
    esCreacion: true
  },
  methods: {
    toggleButton() {
      this.esCreacion = !this.esCreacion
    }
  },
  computed: {
    buttonName() {
      return this.esCreacion ? 'Crear' : 'Editar'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
  <view-header>
    <template v-slot:derecha>
      <button @click="toggleButton">{{ buttonName }}</button>
    </template>    
  </view-header>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.