Creating a button dynamically in vuejs table

Question

I am trying to create a table in vuejs for a personal project (I dont want to use a existing table) and I am facing probably a newbie problem.

I am trying to insert on my last column some buttons, but I dont know why, the grid is rendering my element tag instead of the element himself.

May someone explain to me why this does not work ? And, how can I create this feature ?

Fiddle: https://jsfiddle.net/y7830cvd/1/

<div id="app">
<div>
 <vue-grid :rows="gridData" :title="nTitle"></vue-grid>
  </div>
</div>

    Vue.component('vue-grid', {
  props: ['rows', 'title'],
  template: `<div>
        <h2>{{title}}</h2>
      <div class="table-wrapper">
        <table class="fl-table">
          <thead>
            <tr>
              <th v-for="col in columns" :key="col.id" v-on:click="sortTable(col)">{{col}}</th>
            </tr>
          </thead>
          <tbody v-if="rows.length > 0">
            <tr v-for="row in rows" :key="row.id">
              <td v-for="col in columns" :key="col.id">{{row[col]}}</td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>`,
      computed: {
    columns: function columns() {
      if (this.rows.length == 0) {
        return []
      }
      return Object.keys(this.rows[0])
    }
  },
  sortTable(col) {
    this.rows.sort(function(a, b) {
      if (a[col] > b[col]) {
        return 1
      } else if (a[col] < b[col]) {
        return -1
      }
      return 0
    })
  },
  methods: {
    formatter(row, column) {
      return row.address
    },
    filterTag(value, row) {
      return row.tag === value
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    }
  } 
});

var app = new Vue({
  el: '#app',
  data(){
    return {
    gridData: [
    {"id" : 1, "name": "firstValue", "something": "wha the fox say?","options" : "<button>Add</button>" },
    {"id" : 1, "name": "firstValue", "something": "uauu uauu uauu?"},
    {"id" : 1, "name": "firstValue", "something": "The cow goes mu?"}
    ],
    nTitle: "Hello There!"
  }},
})

tony19 · Accepted Answer · 2022-07-16 00:24:08Z

1

Try v-html:

<td v-for="col in columns" :key="col.id">
    <span v-if="col == 'options'" v-html="row[col]"></span>
    <span v-else>{{row[col]}}</span>
</td>

Something you should consider (source documentation - link above):

Updates the element’s innerHTML. Note that the contents are inserted as plain HTML - they will not be compiled as Vue templates. If you find yourself trying to compose templates using v-html, try to rethink the solution by using components instead.

edited Jul 16, 2022 at 0:24

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 16, 2020 at 12:42

kopz

80413 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fábio Carvalho Over a year ago

Got it! Thanks Kopz, I've been start with vuejs recently and I didn't notice the v-html. It was what I have been looking for.

Collectives™ on Stack Overflow

Creating a button dynamically in vuejs table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related