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.

Enviar datos a un marcador de posición en Vue

31 Jul, 2023 Programación

Quiero mostrar los datos de una lista. Los datos en la lista se actualizan dentro de una función. En realidad, solo quiero mostrar los datos después de la ejecución de esa función.

Aquí está mi código de plantilla.

<div class="modal-body">
      <td>{{shopName}}</td>
</div>

Y este es mi script.

<script>
export default {
  name: "ViewShop",
  props:{
        shops:Object
    },
  data(){
    return{
      shopName:[],
    }
  },
  methods:{
    async shopd(sid){
      this.shopName=this.shops;
      console.log(this.shopName) // Esto muestra los datos en la consola

    }
  }

};
</script>

Quiero imprimir el valor de shopName en mi plantilla después de ejecutar la función shopd()

Creo que shopName se accede en la plantilla antes de ejecutar la función. Entonces lo que necesito es que espere hasta que la función haga algunos cambios en shopName y luego se acceda a la plantilla.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar los datos actualizados de shopName después de ejecutar la función shopd(), puedes usar la directiva v-if en tu código de template. Aquí está el código de template actualizado:

    <div class="modal-body" v-if="shopName.length > 0">
    <td>{{shopName}}</td>
</div>

    En este código, la directiva v-if comprobará si la longitud de shopName es mayor a 0 o no. Si es mayor a 0, entonces mostrará los datos de shopName. De lo contrario, esperará hasta que shopName tenga algún dato para mostrar.

    También necesitas realizar algunos cambios en tu código de script para llamar a la función shopd() y actualizar los datos de shopName. Aquí está el código de script actualizado:

    <script>
export default {
  name: "ViewShop",
  props:{
        shops:Object
  },
  data(){
    return{
      shopName:[],
    }
  },
  mounted(){
    this.shopd(); // Llama a la función shopd() cuando el componente se monta
  },
  methods:{
    async shopd(sid){
      // Tu código para actualizar los datos de shopName
      console.log(this.shops);
      this.shopName = this.shops;
    }
  }
};
</script>

    En este script actualizado, se usa el hook de ciclo de vida mounted() para llamar a la función shopd() cuando el componente se monta. Además, los datos de this.shopName se actualizan dentro de la función shopd().

    Así que ahora, cuando el componente se monte, se llamará a la función shopd() y se actualizarán los datos de shopName. Y luego los datos actualizados de shopName se mostrarán en el template usando la directiva v-if.

Comments are closed.