Format a laravel route string to be used in Vue.js component

Question

I am passing data from a blade file to a Vue component. I am passing a collection of programs to Vue and in the collection of programs is an array and within the array are attributes. One of the attributes is a route attribute. Since the route is coming from Laravel and not vue router, (I am not using vue-router) the route has the blade file extension appended to it as it would be used in a controller when returning a view: so the way the routes are being returned right now in my Vue Component resembles:

route: program1.index,
       program2.index
       program3.index

In my index.blade.php file I bind the programs and pass it to vue:

<programs :programs="{{App\Programs::all()}}">
 </programs>

In Programs.vue I loop through the programs with v-for and am properly accessing the route like so:

   <template>
        <div>
          <a :href="program.route"></a>
        </div>
    </template>

I am using this computed property which properly strips off the .index from the routes, but when I check the value of formattedRoutes in the vue console it is undefined.

computed: {
     formattedRoutes() {
      this.programs.filter(obj => {
        return obj.route.replace(/\.[^/.]+$/, "");
      });
    }
}

This is me calling the computed property in the html:

 <template>
    <div>
       <a :href="program.formattedRoutes"></a>
    </div>
 </template>

The program.formattedRoutes returns undefined I can't figure out why.

Phil · Accepted Answer · 2020-09-10 00:31:02Z

1

Two problems here...

Your computed property doesn't return anything
Computed properties should be pure functions. They should not manipulate any data, otherwise you can end up in an infinite loop since computed property functions execute when data changes

I would instead create a computed property to return programs with your transformed routes. For example

computed: {
  linkedPrograms: vm => vm.programs.map(program => ({
    ...program,
    route: program.route.replace(/\.\w+$/, "")
  }))
}

Now iterate linkedPrograms instead of programs and use the transformed route property in your links. For example (and this is purely guess work because you didn't show how you were iterating programs in your template)...

<!-- I'm just guessing with the "id" and "name" properties -->
<div v-for="program in linkedPrograms" :key="program.id">
  <a :href="program.route">{{ program.name }}</a>
</div>

edited Sep 10, 2020 at 0:31

answered Sep 8, 2020 at 23:31

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CodeConnoisseur Over a year ago

I implemented your solution but the links are appearing in duplicates across the page.

CodeConnoisseur Over a year ago

so it is appearing like this:

<div><a href="program1">Program1</a></div> <div><a href="program2">Program2</a></div> <div><a href="program3">Program3</a></div>

just repeating across the page and also spanning multiple rows. So program 1 shows up three times on the page.

Phil Over a year ago

Well, you didn't show how you were iterating programs so I had to improvise. Instead of just blindly copy / pasting an answer that clearly says it's guessing some parts, see if you can adapt it to fit what you actually need

Collectives™ on Stack Overflow

Format a laravel route string to be used in Vue.js component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related