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.
Si desea imprimir el objeto de shops como valor predeterminado para shopName al representar el componente, dado que ya es un accesorio, simplemente puede llamarlo en su variable shopName .
props:{ shops:Object }, data(){ return{ shopName: this.shops, } }, Luego, si desea actualizar el valor de la variable shopName en el camino, está haciendo bien al asignar el nuevo valor con su método shopd , pero necesita un evento desencadenante que es realmente lo que usará para vincular. Por ejemplo:
<div class="modal-body"> <td @click="shopd">{{shopName}}</td> </div>que es equivalente a
<div class="modal-body"> <td v-on:click="shopd">{{shopName}}</td> </div> Por último, si solo desea procesar el accesorio de shops una vez antes de asignar el valor predeterminado de nombre de shopName , simplemente puede llamar a la función en la variable nombre de shopName y devolver el resultado.
data(){ return{ shopName: this.shopd, } }, methods: { shopd() { return this.shops } }