Format Column Data before passing to Vue Good-Table

self.variationOrders is undefined in the data method; self is only available in the scope of the getTotals method.

Instead, use a computed property to format columns.

computed:{  formattedColumns(){    const formattedVariations = this.formatVariations(this.variationOrders)    return this.columns.map(c => {      if (c.label === "Variations")        return {label: "Variations", field: formattedVariations , html: true}      return c    })  }}

And use the computed property in the template.

<vue-good-table  title=""  :columns="formattedColumns"  :rows="variationOrders"  :paginate="true"  :lineNumbers="true"/>

The computed property should be updated whenever variationOrders changes.

Edit

The above answers the question that was asked, but doesn't actually render the desired table (as I understand it). This is because of a misunderstanding in how vue-good-table works.

If I understand correctly, what OP really wants is for the content of the cell in the table to be formatted with HTML. In order to do that, you simply need to use the scoped slot table-row. Here is how the template should look (the columns are abbreviated for this example).

<vue-good-table  title=""  :columns="columns"  :rows="variationOrders"  :paginate="true"  :lineNumbers="true">  <template slot="table-row" scope="props">    <td>{{ props.row.order_id }}</td>    <td>{{ props.row.customer_name }}</td>    <td><span v-html="formatVariations(props.row.variation)"></span></td>  </template></vue-good-table>

I also updated the formatVariations method:

formatVariations: function(variationOrders) {  let parsed = JSON.parse(variationOrders).map(order => {    return `${order.key} : ${order.value} <br>`  })  return parsed.join('');},

This is assuming the data format looks like this:

[  {    order_id: 1,    customer_name: "Bob NewHart",    qty: 10,    product_name: "Hats",    variation: '[{"id": 35, "key": "choose-your-cake", "value": "Naked"}, {"id": 36, "key": "choose-sugar", "value": "Yes"}]'  },  {    order_id: 2,    customer_name: "Mary Lamb",    qty: 10,    product_name: "Necklaces",    variation: '[{"id": 35, "key": "choose-your-cake", "value": "Naked"}, {"id": 36, "key": "choose-sugar", "value": "Yes"}]'  },]