Quiero mostrar datos de una lista. Los datos de la lista se actualizan dentro de una función. En realidad, quiero mostrar los datos solo 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 guión.
<script> export default { name: "ViewShop", props:{ shops:Object }, data(){ return{ shopName:[], } }, methods:{ async shopd(sid){ this.shopName=this.shops; console.log(this.shopName) // This prints the data in the console } } }; </script> Quiero imprimir el valor de shopName en mi plantilla después de ejecutar la función shopd()
Creo que se accede a shopName en la plantilla antes de ejecutar la función. Entonces, lo que necesito es esperar hasta que la función haga algunos cambios en shopName y luego debería acceder a la plantilla.
Para eso necesitarás una variable auxiliar:
<script> export default { name: "ViewShop", props:{ shops:Object }, data(){ return{ shopName:[], showShopName: false, } }, methods:{ async shopd(sid){ this.shopName = this.shops; this.showShopName = true; } } }; </script>Luego en tu plantilla:
<div class="modal-body"> <td>{{ showShopName ? shopName : "" }}</td> </div>Puede usar la directiva v-if. El html dentro de v-if no formará parte del dom hasta que se cumpla la condición de v-if.
<div class="modal-body" v-if="shopName.length>0"> <td>{{shopName}}</td> </div>No estoy seguro si shopName es una matriz o una cadena, la condición puede cambiar en consecuencia. Y puede obtener información sobre la representación condicional en la documentación: https://vuejs.org/v2/guide/conditional.html
En este momento, no sé si necesita una matriz como tipo o simplemente una cadena simple. Pero en la plantilla puedes hacer esto. Si cambia el tipo de la variable shopName a nulo y usa la directiva v-if para ocultar el elemento.
<div class="modal-body" > <td v-if=shopName !== null>{{shopName}}</td> </div>