Динамическое создание кнопки в таблице vuejs

Question

Я пытаюсь создать таблицу в vuejs для личного проекта (я не хочу использовать существующую таблицу), и я, вероятно, сталкиваюсь с проблемой newb ie.

Я пытаюсь вставьте в мой последний столбец несколько кнопок, но я не знаю почему, сетка отображает мой тег элемента, а не сам элемент.

Может кто-нибудь объяснить мне, почему это не работает? И как я могу создать эту функцию?

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!"
  }},
})

Answer 1

Попробуйте 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>

Что-то, что вам следует учесть ( исходная документация - ссылка выше ):

Обновляет внутренний элемент HTML. Обратите внимание, что содержимое вставляется как обычный HTML - оно не будет скомпилировано как шаблоны Vue. Если вы обнаружите, что пытаетесь составлять шаблоны с использованием v- html, попробуйте переосмыслить решение, используя вместо этого компоненты.