How to get html only from returned object vuejs

Question

I have a vue project that needs to return data from a rich text field in Contentful. The data is returned as an object, is there a way to render this data using the v-html directive? At present I am able to render the html however it's wrapped in brackets, pictured below.

Code

  <div 
            v-if="testRich"

            class="mb4 testRich"

            v-html="testRich"
  />

`testRich.content[0].content[0].value` if you want the value — depperm, Jan 16 '20 at 16:50
@depperm, Awesome, I knew it was something simple I was missing. You can add that as the answer and I will accept it. — Shawn, Jan 16 '20 at 16:52

score 1 · Accepted Answer · answered Jan 16 '20 at 16:48

One option is to use filters, if you actually want the whole object

Vue.filter('jsonPretty', (value)=>{
  return JSON.stringify(value,null,4)
})

and then usage:

<div>{{testRich | jsonPretty}}</div>

If you just want the value you need to reference it correctly:

v-html="testRich.content[0].content[0].value"

How to get html only from returned object vuejs

1 Answers1