So I am bad, really bad at asking questions so I decide to make a video so I can explain myself what I want to ask, in little words I can say I want to have more data available from a component to a child component, just like we do on a Ruby on Rails CRUD app in the view post page.

this is the video please look at the video and discard my words --> https://youtu.be/026x-UvzsWU

code:

row child component:

<template>
    <tr>
        <td class="name-logo-col">
            <!-- dynamic routes for data -->
        <router-link
        :to="{ name: 'Companies', params: {id : row.Name} }">
        <b>{{row.Name}}</b><br> ...

Sheet component:

<template>
<div class="container-fluid">
        <div class="row">
            <main role="main" class="col-md-12 ml-sm-auto col-lg-12 pt-3 px-4">
                <div class=" pb-2 ma-3 ">
                    <h2 class="center">Funding</h2>
                    <v-divider></v-divider>
                </div>
                <div class="mb-5 table-responsive">
                <!-- <v-data-table
                    :headers="headers"
                    :items="rows"
                    class="elevation-1">
                </v-data-table> -->
                <table class="table table-striped ">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Funding Date</th>
                        <th>Amount Raised</th>
                        <th>Round</th>
                        <th>Total Raised</th>
                        <th>Founder</th>
                        <th>Est.</th>
                        <th>Location</th>
                        <th>Lead Investor</th>
                    </tr>
                    </thead>
                    <tbody >
                        <Row v-bind:key="row.id" v-for="row in rows" v-bind:row="row" />
                    </tbody>...
                       
                     //data 

                                    rows: [],
            loading: true,
        }
    },
    methods:{
        async accessSpreadSheet() {
            const doc = new GoogleSpreadsheet(process.env.VUE_APP_API_KEY);
            await doc.useServiceAccountAuth(creds);
            await doc.loadInfo();
            const sheet = doc.sheetsByIndex[0];
            const  rows = await sheet.getRows({
                offset: 1
            })
            this.rows = rows;
            this.loading = false;
        }
    },
    created() {
        this.accessSpreadSheet();
        // testing console.log(process.env.VUE_APP_API_KEY)
    }

This where my view company dynamic router child component:

     <template>
  <v-container class="fill-height d-flex justify-center align-start" >
    <h3> Company component: {{ $route.params.id }}  </h3>
    <p> {{$route.params.Location}}  </p>
  </v-container>
</template>

<script>
export default {
  name: "Company",
  data() {
    return {
    }
  }
}
</script>

This is the parent component companies of company child :

<template>
  <v-container class="fill-height d-flex justify-center align-start" >
    <div>
      <h1> Companies man view </h1>
      <Company/>
      <router-link  to="/funds">
        Back
      </router-link>
   </div>
  </v-container>
</template>

<script>
import Company from '@/components/Company.vue'

export default  {
  name: "Companies",
  components: {
    Company
  },

}
</script>

This is my router link index page related code:

{
    path: '/companies/:id',
    name: 'Companies',
    props: true,
  component: () => import(/* webpackChunkName: "add" */ '../views/Companies.vue')
  }
]


const router = new VueRouter({
  mode: 'history',
  routes,
  store
})

CodePudding user response：

So I watched the video and I think you're approaching this from the wrong angle.

It seems that you're unfamiliar with Vuex and you might assume you pass all that data through $route, which is not what it's supposed to be used for.

So this would ideally be the flow:

• You get data from API
• Data gets stored in the Vuex store
• User navigates to page
• Param.id get retrieved from $route
• Id gets send to Vuex store as a parameter in a getter
• Getter returns data to component filtered by the id
• Data gets used in component

Doing it this way keeps all your data centralized and re-usable in any component. You can even see in real-time what is in the Vuex store by going to Chrome tools and clicking the Vuex tab.

Let me know if you have further questions!

CodePudding user response：

I'm not pretty sure if I understand the whole question, but I will try to answer the part that I understand.
If you want to pass the other elements inside the row rather than just the Name or Location to route with the name "Companies", your first code actually just needs a little change. You just need to pass the whole row and don't forget to parse it into a string, so the data will remain after reload.

<router-link
    :to="{ name: 'Companies', params: {id : JSON.stringify(row)} }">

and then parse it back into JSON inside the Companies component using JSON.parse($route.params.id).

Or

you can use multiple params, so instead of naming your params inside router index as path: '/companies/:id, you should name it as path: '/companies/:Name/:Location' and then you pass the data of the other params.

<router-link
    :to="{ name: 'Companies', params: { Name: row.Name, Location: row.Location } }">

But all params are mandatory, so you have to pass value to all params every time.

OR

Rather than using params, you can use query, it was more flexible. You can pass any additional query without modifying the path inside router index.

<router-link
    :to="{ name: 'Companies', query: { Name: row.Name,Location: row.Location } }">

and delete /:id from your router index, so it would be just path: '/companies',

and after that you can directly access the query value inside the Companies component with $route.query.Name