Vue Router does not work when i add router dynamically through javascript

//My function inside rsalesearch.vue where i add dynamically router-view
rowAdd(id,user,sum,date)
{ console.log(“running”);
this.table.row.add([
<router-link to='retailsaleview/${id}'>${id}</router-link>,user,sum,date
]);
}

Routes.js
{
path:’/retailsaleview/:id’,
component:rsaleviewcomponent
}

Not sure, but shouldn’t that be

retailsaleview/${id} (in Backticks - which I struggle to enter in the forum’s editor. Backticks instead of the single quotes you use in your example)

or

'retailsaleview/'+id

Thanks for replaying but it is not working actually when i write it in php it work and change
<router-view> to <a> tag but when i add it through javascript the <router-view> remain router view

Please use syntax highlighting with your code examples.

Regarding your issue, don’t construct your row with raw code. Instead, use a v-for loop in your template and construct with your data. This way when new rows are added they will rendered by Vue.

e.g.

<template>
  <router-link to=`retailsaleview/${ row.id }` v-for="row in rows">{{ row.id }}</router-link>
</template>
export default {
  data () {
    return {
      rows: [
        {
          id: 'foo',
          user: 'foo',
          // etc.
        }
      ]
    }
  }
}
1 Like