Vue.js 在vuejs表中动态创建按钮

我试图在vuejs中为个人项目创建一个表（我不想使用现有表），我可能面临一个新手问题

我试图在最后一列中插入一些按钮，但我不知道为什么，网格呈现的是我的元素标记，而不是元素本身

有人能给我解释一下为什么这不起作用吗？还有，我如何创建此功能

小提琴：

Vue.component（'Vue-grid'{
道具：['rows'，'title']，
模板：`
{{title}}
{{col}}
{{row[col]}
`,
计算：{
列：函数列（）{
if（this.rows.length==0）{
返回[]
}
返回Object.keys（this.rows[0]）
}
},
分类表（col）{
this.rows.sort（函数（a，b）{
如果（a[col]>b[col]）{
返回1
}如果（a[col]

试试：

{{row[col]}

你应该考虑的东西（源文档-链接以上）：

更新元素的innerHTML。请注意，内容是插入的 作为普通HTML-它们不会编译为Vue模板。如果你 发现自己试图使用v-html编写模板，尝试重新思考 解决方案是使用组件代替

---

知道了！感谢Kopz，我最近开始使用vuejs，但我没有注意到v-html。这就是我一直在寻找的。

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

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