Vue - use computed property inside HTML data

Question

How can I use the return value of a computed property inside a data element that is rendered as HTML?

I have a data element that is HTML, and it looks like this:

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

I've also tried this:

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

I am trying to pass in the name via this computed property:

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

But all I'm getting is undefined. If I just put brideName on the component as a test, it returns the first name of the bride just fine.

Where did I go astray?

Here is a fiddle with my dilemma

Does this answer your question? [Use computed property in data in Vuejs](https://stackoverflow.com/questions/44318343/use-computed-property-in-data-in-vuejs) — Tibebes. M, Oct 19 '20 at 18:46
@Tibebes.M no.. my problem is rendering the computed method inside of the HTML that's stored in data.. — ToddT, Oct 19 '20 at 19:09
i've added an example you can check it out if that's what you want along with a fiddle — Suraj Tiwari, Oct 19 '20 at 19:14
I've added a fiddle to the OP to show everyone what's going on — ToddT, Oct 19 '20 at 20:01
@ToddT Any particular reason for not using the template directly instead of through a computed prop? There's also JSX support in Vue CLI generated projects, which can be helpful in generating elements. — tony19, Oct 19 '20 at 23:28
@tony19 yep, so this HTML is provided directly to vue-quill-editor. So I don't have a chance to render it directly. — ToddT, Oct 20 '20 at 12:33

Suraj Tiwari · Answer 1 · 2020-10-19T19:20:43.497

1

Instead of going with data -> computed -> data -> render, go directly with computed -> render (html)

In your template you can render html like this

 <span v-html="brideName" />

assuming your data structure of returnContracts to be like this

data: {
  returnContracts: [
    {
      "brideName": "Emma Watson"
    }
  ]
}

Then you can directly render brideName from computed

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

here is a fiddle to help you out implementation

edited Oct 19 '20 at 19:20

answered Oct 19 '20 at 19:13

Suraj Tiwari

366
1
11

shoot.. I updated your fiddle with what I'm trying to do! https://jsfiddle.net/v4efaL3n/3/ – ToddT Oct 19 '20 at 20:01
Accepted ans isn't good by performace presepctive if you get value and do operation in single function it's faster. also computed is just like data, if any data value used in computed is changed it will re-render it. https://jsfiddle.net/tsfv4ohk/ – Suraj Tiwari Oct 20 '20 at 21:38

score 1 · Accepted Answer · answered Oct 19 '20 at 20:51

data() is invoked on component creation and is not reactive. contractContent should be a computed prop for your code to work:

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

updated fiddle

Vue - use computed property inside HTML data

2 Answers2