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 {

  data() {

    return {

      name: "Martina Navratilova",

    }

  },

  computed: {

    brideName() {

      return `<p>Hi ${this.name.split(' ')[0]},</p>`

    },

    contractContent() {

      return `<p>Hi there ${this.brideName}</p>`

    },

  },

}

更新的小提琴

Answer 2

而不是使用数据 - >计算 - >数据 - >渲染，直接使用计算 - >渲染（html）

在您的模板中，您可以像这样呈现 html

 <span v-html="brideName" />

假设你的数据结构是returnContracts这样的

data: {

  returnContracts: [

    {

      "brideName": "Emma Watson"

    }

  ]

}

然后你可以直接从计算的渲染 brideName

brideName(){

  // assuming you'll have correct data, if data isn't valid this will cause crash.

  return `<p>Hi ${this.returnContracts[0].brideName.split(' ')[0]},</p>`

}

这是一个小提琴来帮助你实施