Passing json data from one vue page to another vue page and render the chart

user_7808510 0
Viewed 1285

I am traversing a json data inside a table in vue and passing some of it to a different page using router link. 

 Projects.vue

         <tbody class>
          <tr v-for="project in projects" aria-rowindex="1" class>
            <td aria-colindex="1" class>{{project.name}}</td>
            <td aria-colindex="2" class>{{project.date}}</td>
            <td aria-colindex="3" style="width: 100px">
          <router-link to={name: 'Performance', params: {{project.Line_base}} }> 
                <i class="fa fa-eye"></i>
              </router-link>&nbsp;
              <i class="fa fa-edit"></i>
              &nbsp;
              <i class="fa fa-remove icons" style="color: red"></i>
              &nbsp;
              <i class="fa fa-share-alt"></i>
            </td>
          <!-- <td aria-colindex="4" class>{{project.short_description}}</td> -->
          </tr>

import axios from 'axios';
import Performance from "./Performance";

export default {
 components: {
  Performance
      },
  name: "builder-basic",
   data() {
    return {
       projects: []
     };
   },
   mounted () {
    axios
       .get('http://some.api.net/v1/projects/')
       .then(response => (this. projects = response.data.entities))
   },
 };
 </script>

This project.Line_base is an array of integers, that I want to pass to 

  Performance.vue 

   <template>
   <div class="animated fadeIn">
     <b-card header-tag="header" footer-tag="footer">
      <div slot="header">Performance - Models vs Baseline</div>
       <div class="card-body" >
        <div class="chart-wrapper" >
          <b-card header="Lift Chart" >
            <div class="chart-wrapper">
              <line-example  chartId="chart-line-01"   :styles="chartStyle"  />
             </div>
           </b-card>
        </div>
        </div>
         <div class="card-body" >
            <div class="chart-wrapper">
             <b-card header="Accuracy & Sensitivity" >
              <bar-example  chartId="chart-bar-01"   :styles="chartStyle"  />
            </b-card>
         </div>
        </div>   
     </b-card>

   </div>
 </template>

 <script>
 import axios from "axios";
 import LineExample from "./charts/LineExample";
 import BarExample from "./charts/BarExample";

export default {
  name: 'Performance',
  components: {
  LineExample,
   BarExample
  },
  computed: {
    chartStyle () {
      return {
        height: '500px',
        position: 'relative'
      }
    }
    }

    }
  };

 </script>

I have the index.js where I have mentioned the routers, which are working well if I am not passing any data to performance, from where I will generate a graph using charts.

 index.js
  let router = new Router({
  mode: 'hash', // https://router.vuejs.org/api/#mode
  linkActiveClass: 'open active',
   scrollBehavior: () => ({ y: 0 }),
   routes: [
    {
     path: '/',
      redirect: '/dashboard',
      name: 'Home',
     component: DefaultContainer,
      children: [
        {
      path: 'Performance',
      name: 'Performance',
      component: Performance
    }])

The data is not being passed, I followed some of the articles already discussed on stack overflow

vue-router axios vue.js javascript
2 Answers

It seems like you are making a syntaxerror. This the example from the vue router docs: 

<!-- named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

Further on in the docs it specifies router-link properties, stating:

route.params

type: Object

An object that contains key/value pairs of dynamic segments and star segments. If there are no params the value will be an empty object.

Compare that to your code: 

<router-link to={name: 'Performance', params: {{project.Line_base}} }>

It seems you are forgetting the semicolon before to (which is shorthand for v-bind:to. Without that whatever comes after will just be passed as a string rather than a javascript expression. This should help.

You could try rewriting to:

<router-link :to="{name: 'Performance', params: {Line_base: project.Line_base} }">

Hope that helps!

EDIT: added clarification

user_73717760

Send the params like this;

<router-link :to="{name: 'Performance', params: { Line_base: project.Line_base }}">
  <i class="fa fa-eye"></i>
</router-link>

In your Performance.vue Component you need to get de params from the route like this.

computed: {
  lineBase () {
    return this.$route.params.Line_base
  }
}
user_73795030
Related