![](/img/trans.png)
[英]Vue-router: I don't want to use all routes for dynamically creating loop of <router-link>
[英]How to use vue-router and router-link to handle links dynamically created in jquery modules such a datatables?
我試着用一個Vue應用程序“整合”datatables.net( https://datatables.net/ )一段時間。
最終我偶然發現了一些評論,這些評論本質上不是為了嘗試集成,而是利用jquery模塊as-in並通過掛載/創建的事件“掛鈎”它們。
所以,在這方面,我有以下代碼幾乎工作
<template>
<table aria-describedby="feedback-history_info" role="grid" id="feedback-history" class="table table-bordered table-striped dataTable">
<thead>
<tr role="row">
<th>ID</th>
<th>Created Date</th>
<th>Project</th>
<th>Reviewer</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th colspan="1" rowspan="1">Created Date</th>
<th colspan="1" rowspan="1">Project</th>
<th colspan="1" rowspan="1">Reviewer</th>
<th colspan="1" rowspan="1">Status</th>
</tr>
</tfoot>
</table>
</template>
<script>
import $ from 'jquery'
// Require needed datatables modules
require('datatables.net')
require('datatables.net-bs')
import moment from 'moment'
export default {
name: 'Feedback',
data() {
return {}
},
mounted() {
$('#feedback-history').DataTable({
"ajax": "/index.sjs?list",
"processing": false,
"serverSide": true,
"columns": [
{
"data": "id"
},
{
"data": "created"
},
{
"data": "projectName"
},
{
"data": "reviewer"
},
{
"data": "status"
}
],
"columnDefs": [{
"render": function(data, type, row) {
return moment(parseInt(data)).format('MMMM Do YYYY');
},
"targets": 1
},
{
"render": function(data, type, row) {
// I want to use router-link similar to following
return `<router-link :to="{ name: 'FeedbackEdit', params: { feedbackId: ${ row.id } }}">${ row.projectName }</router-link>`
// To render as ...
// <a href="/edit/feedback/${row.id}">${data}</a>
},
"targets": 2
},
{
"visible": false,
"targets": [0]
}
]
})
}
}
</script>
<style>
</style>
唯一的問題是在我的數據表單元格中呈現鏈接。 當我使用vue-router時,我需要通過router-link vue-router來“處理鏈接”。 (參見代碼中的注釋)。
任何幫助表示贊賞。
最后,我沒有使用router-link。
相反,我使用了vuex並將足夠的會話信息保存到vuex存儲,這樣在頁面刷新時我可以適當地重新渲染視圖。
雖然從技術上講這是頁面刷新或“頁面翻轉”而不是使用DOM(或shadow-DOM)來操縱視圖的反應SPA方式,但它確實在沒有更好的方法的情況下提供了足夠的經驗。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.