vue-routerとrouter-linkを使用して、jqueryモジュールでダイナミックに作成されたリンクを処理する方法

Question

私はdatatables.net（https://datatables.net/）をVueアプリケーションと「統合」するためにしばらく試してみました。

結局のところ、統合を試みるのではなく、jqueryモジュールをそのまま使用して、マウントされた/作成されたイベントを介してそれらを「フック」するコメントを見つけました。

ので、その静脈で、私はほぼ

<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に「リンクを処理する」必要があります。 （コードのコメントを参照）。

何か助けていただければ幸いです。

Answer 1

最後に、私はrouter-linkを使用しませんでした。

むしろ、私はvuexを使用し、十分なセッション情報をvuexストアに保存して、ページの更新時にビューを適切に再レンダリングできるようにしました。

技術的には、これはページのリフレッシュまたは「ページフリップ」であり、DOM（またはシャドウDOM）を使用してビューを操作する反応的なSPAではありませんが、より良いアプローチ。