3

hola que tal estoy montando un componente con unos datos, me los trae bien pero se mebre escribe con otra tabla, pero eso es justamente lo que me dice la consola :

Evite mutar un elemento directamente, ya que el valor se sobrescribirá cada vez que el componente principal se vuelva a procesar. En su lugar, use una propiedad de datos o computada basada en el valor de la prop. Proposición siendo mutada: "estados", es literal bueno la verdad estoy recién entrando en el tema de los componentes, como podría solucionarlo, eh intentado cambiarlo, pero no obtengo resultados, este es mi código:

<template>
 <div class="col-md-12">
    <div class="row">      
        <div   class="table-responsive" id="estadoreparto" > 
              <table class="table table-hover table-bordered table-striped" v-if="estados.length > 0">
                <thead>
                  <tr>
                    <th scope="col">Estado Pedido</th>
                    <th scope="col">Lugar</th>
                    <th scope="col">Hora</th>   
                  </tr>
                </thead>
                <tbody>
                <tr v-for="estado in estados" :key="estado.codigo">
                    <td>{{ estado.estado}}</td>
                    <td>{{ estado.direccion_cliente}}</td>
                    <td>{{ estado.salida}}</td>
                </tr>
                </tbody>
               </table> 

               <table v-else class="table table-hover table-bordered table-striped">
                <thead>
                  <tr>
                  <th scope="col">Estado Repartidor</th> 
                  </tr>
                </thead>
            <tbody>
              
             <tr v-for="colacion in colaciones" :key="colacion.id">
               <td >{{colacion.estado_usuario}}</td>
             </tr>
            </tbody>
            </table>                     
        </div> 
        </div>    
     </div>
</template>

<script>
    export default {
        props:['estados', 'colaciones'],
         template: '',

mounted() {
            console.log('Component mounted.')
             this.cargarNesesarias();
                 
        },
        methods: {
            cargarNesesarias(){
              axios.get("api/rutarepartidor")
        .then(response => {
          this.estados = response.data;
          
          })
          axios.get("api/estadorepartidor")
        .then(response => {
          this.colaciones = response.data;
          })
            },    
        },    
    }
</script>

en pedido.vue lo estoy mostrando asi :

<div>
              <!-- aca va el componente -->
              <disponibilidad :colaciones ="colaciones"
                :estados="estados" ></disponibilidad>
            </div>

en pedido.vue el script :

<script>

    export default {
      data(){
        return{
          estados:'',
          colaciones:'',
           },       
        }    
      },

        mounted() {

            
        },
        methods:{

        },
    }
</script>

como podría solucionarlo envió una foto del problema si que tengo que usar computed, pero jamas lo eh echo, trate de usarlo y no pude solucionarlo gracias de ante mano.

introducir la descripción de la imagen aquí

2
  • Muéstranos lo que intentaste con computed.
    – Shaz
    Commented el 24 jun. 2019 a las 15:31
  • 2
    Borre las etiquetas laravel (no tiene nada que ver con vue) y typescript (este codigo no implementa ts para nada).
    – gbianchi
    Commented el 24 jun. 2019 a las 15:35

1 respuesta 1

2

El problema es el siguiente:

Para que cambias una propiedad que viene del padre? cual es el sentido de cambiarla si la mando el componente que usa este?

Tu problema esta en estas dos partes:

props:['estados', 'colaciones'],

cargarNesesarias(){
          axios.get("api/rutarepartidor")
    .then(response => {
      this.estados = response.data;

      })
      axios.get("api/estadorepartidor")
    .then(response => {
      this.colaciones = response.data;
      })
        },    

Fijate que pedis por prop esas variables, pero despues las cambias en un metodo. Como no se la logica de porque haces esto te preguntaria.. es necesario que sea una propiedad o en tal caso, es necesario que alguien cambie una propiedad que te pasaron?

Lo que te dice el error, es que si vos cambias 'estados' en tu hijo, y el padre vuelve a dibujarse, va a volver a cambiar estados a su estado original.

Para evitar esto, o usas una propiedad en tu data que copie la que pasaste como props

props:['estados', 'colaciones'],
data(){
    return{
      Esteestados: this.estados
      Estecolaciones: this.colaciones,
       },       
    }    
  },

Y cuando quieras modificar haces

cargarNesesarias(){
      axios.get("api/rutarepartidor")
.then(response => {
  this.Esteestados= response.data;

  })
  axios.get("api/estadorepartidor")
.then(response => {
  this.Estecolaciones= response.data;
  })
    },    

O usas una propiedad computada

1
  • gracias tu ejemplo me sirvió mucho, al principio no me funcionaba pero cambie el nombre del response por this.ecolaciones= response.data; y el script export default { props:['estados', 'colaciones'], template: '', data(){ return{ eestados: this.estados, ecolaciones: this.colaciones, } } , y la comparacion <table class="table table-hover table-bordered table-striped" v-if="estados.length > 0"> , esta 100% funcionando muchas gracias por tu tiempo Commented el 24 jun. 2019 a las 18:03

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.