Vue - 在 HTML 数据中使用计算属性

Question

如何在呈现为 HTML 的数据元素中使用计算属性的返回值？

我有一个 HTML 数据元素，它看起来像这样：

contractContent: `<p>Hi ${this.brideName},</p>`

我也试过这个：

contractContent: `<p>Hi {{this.brideName}},</p>`

我试图通过这个计算属性传入名称：

brideName() {
  return this.returnContracts[0].brideName.split(' ')[0]
},

但我得到的只是undefined。如果我只是把brideName这个组件作为测试，它会返回新娘的名字就好了。

我哪里误入歧途了？

这是我的困境的小提琴

Answer 1

data()在组件创建时调用并且不是反应性的。contractContent应该是您的代码工作的计算道具：export default {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; name: "Martina Navratilova",&nbsp; &nbsp; }&nbsp; },&nbsp; computed: {&nbsp; &nbsp; brideName() {&nbsp; &nbsp; &nbsp; return `<p>Hi ${this.name.split(' ')[0]},</p>`&nbsp; &nbsp; },&nbsp; &nbsp; contractContent() {&nbsp; &nbsp; &nbsp; return `<p>Hi there ${this.brideName}</p>`&nbsp; &nbsp; },&nbsp; },}更新的小提琴

Answer 2

而不是使用数据 - >计算 - >数据 - >渲染，直接使用计算 - >渲染（html）在您的模板中，您可以像这样呈现 html&nbsp;<span v-html="brideName" />假设你的数据结构是returnContracts这样的data: {&nbsp; returnContracts: [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "brideName": "Emma Watson"&nbsp; &nbsp; }&nbsp; ]}然后你可以直接从计算的渲染 brideNamebrideName(){&nbsp; // assuming you'll have correct data, if data isn't valid this will cause crash.&nbsp; return `<p>Hi ${this.returnContracts[0].brideName.split(' ')[0]},</p>`}这是一个小提琴来帮助你实施