0
テーブルに3つの異なるjsonのリストを表示したかったのです。最初にはURL、Googleマップへの2番目のURL、最後のメッセージが含まれています。私は、このカラムのキー名が"url"
ときにハイパーリンクを作成したかったが、VUEの自動エスケープテーブルにVue js insert link
<script type="text/x-template" id="grid-template">
<table class="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">${isUrl(key,entry[key])}</td>
</tr>
</tbody>
</table>
</script>
Vue.component('demo-grid', {
template: '#grid-template',
delimiters: ['${', '}'],
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
},
isUrl: function (key, str){
if (key == "url"){
var exp = /^((?:https?|ftp):\/\/.)?(www\.)?[[email protected]:%._\+~#=]{1,256}\.[a-z]{2,4}\b([[email protected]:%_\+.~#?&//=]*)/ig;
return str.replace(exp,"<a :href='$1'>$1</a>");
}
else{
console.log("ej")
return str
}
}
}
})
:私はこのようなテンプレートを持って、それをレンダリングするために
。ハイパーリンクのテキストを置き換える方法を教えてください。
データの例:
[{
"date": "2017-08-09 18:25:06.226631",
"id": 5,
"private": true,
"reviewed": false,
"title": "To Protect Voting, Use Open-Source Software - NYTimes.com",
"url": "j.mp/2upm633",
"user": 1
}]
は、その中で考えていませんでした。とてもシンプルです...ありがとう! –