Estimados, he intentado aplicar la función para invertir la cadena en el texto del párrafo en vue.js, he creado una función para invertir palabras en métodos llamados (palabra inversa) y la he agregado
card usando :rule="reverseword()", pero no funciona. su apoyo es muy apreciado Código:
<div class="post-box"> <span class="post-viwes">{{viwes}}</span> <h3 class="post-title">{{title}}</h3> <span class="post-date">{{date}}</span> <p class="post-content">{{content}}</p> <div class="row"> <div class = "col-sm-6 text-right"> <span class="post-author">{{author}} </span> </div> <div class = "col-sm-6 text-right" :rules="reverseword()"> <span class="post-category" >{{category.toUpperCase()}}</span> </div> </div> ) </div> </template> <script> export default { props:["viwes","title","date","content","author","category"], name:"posts", methods: { reverseWord: function () { this.category = this.category.split('').reverse().join('') } }}; </script>```Su método reverseWord intenta mutar un objeto ( category ).
No puede mutar un accesorio, porque la mutación se sobrescribiría con la primera actualización del padre.
Si/cuando desea/necesita cambiar un valor de prop, debe hacerlo en el componente principal, que luego pasará el cambio al componente secundario, a través del enlace de props.
La actualización del padre del hijo se puede hacer mediante
Si, de hecho, no desea mutar la category , solo necesita poder usar su reverso dentro de la plantilla, crear una propiedad computed :
computed: { reversedCategory() { return this.category.split('').reverse().join(''); } }Úselo en la plantilla como usaría una propiedad normal:
<div class = "col-sm-6 text-right" :rules="reversedCategory"> <span class="post-category" >{{category.toUpperCase()}}</span> </div> El computed es reactivo. Es decir, cada vez que cambia la category , reverseCategory se actualizará en consecuencia.