将函数from方法应用于vue.js中段落中的反向字符串

Question

Dears，我已经尝试在vue.js中将函数应用于段落文本中的反向字符串，我已经创建了一个函数来反转名为(reverseword(的方法中的单词，并使用：rule="反向字(("；，但它不起作用。非常感谢您的支持代码：

<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>```

Answer 1

您的reverseWord方法试图变异道具(category(
您不能对道具进行变异，因为父项的第一次更新会覆盖变异。

如果/当您确实希望/需要更改道具值时，您必须在父组件中进行更改，然后父组件将通过道具绑定将更改传递给子组件。

可以从子项更新父项

• 使用$emit
• 或者通过使用子级和父级外部的存储

---

如果事实上你不想突变category，你只需要能够在模板中使用它的反向，创建一个computed属性：

computed: {
reversedCategory() {
return this.category.split('').reverse().join('');
}
}

在模板中使用它，就像使用普通属性一样：

<div class = "col-sm-6 text-right" :rules="reversedCategory">
<span class="post-category"  >{{category.toUpperCase()}}</span>
</div>

computed是反应性的。这意味着每当category发生变化时，reverseCategory都会相应地更新。