0👍
✅
You should use v-html
directive to interpret it properly like <td v-for="key in columns" v-html="entry[key]">
Note
set "
properly here :
{ name: 'Jet Li', power: 8000 ,report: '<a href="http://www.google.com">Google</a>'}
Vue.component('demo-grid', {
template: `<table>
<thead>
<tr>
<th v-for="key in columns"
@click="sortBy(key)"
:class="{ active: sortKey == key }">
{{ key | capitalize }}
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="entry in filteredData">
<td v-for="key in columns" v-html="entry[key]">
</td>
</tr>
</tbody>
</table>`,
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function() {
var sortOrders = {}
this.columns.forEach(function(key) {
sortOrders[key] = 1
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
computed: {
filteredData: function() {
var sortKey = this.sortKey
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortKey] || 1
var data = this.data
if (filterKey) {
data = data.filter(function(row) {
return Object.keys(row).some(function(key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
if (sortKey) {
data = data.slice().sort(function(a, b) {
a = a[sortKey]
b = b[sortKey]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
},
filters: {
capitalize: function(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
},
methods: {
sortBy: function(key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
}
}
})
// bootstrap the demo
var demo = new Vue({
el: '#demo',
data: {
searchQuery: '',
gridColumns: ['name', 'power', 'report'],
gridData: [{
name: 'Chuck s',
power: Infinity
},
{
name: 'Bruce Lee',
power: 9000
},
{
name: 'Jackie Chan',
power: 7000
},
{
name: 'Jet Li',
power: 8000,
report: '<a href="http://www.google.com">Google</a>'
}
]
}
})
<html>
<head>
<meta name="description" content="Vue.delete">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>
<body>
<div id="demo">
<div id="grid-template">
</div>
<!-- demo root element -->
<div id="demo">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
<demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
</demo-grid>
</div>
</div>
</body>
Source:stackexchange.com