CODEWITHSUNDEEP
vue.js
rgb
rgb

Reputation: 1284

Vue js - how can I pass this property to a component in a loop?

I have a custom component that conditionally renders either a link to path or a span for disabled link if the supplied path-disabled method determines so, the internals of which are unimportant other than it works when used like this:

<li>
  <conditional-link path="/step/1" :path-disabled="pathDisabled">
    <span class="number">1</span>
    Step one
  </conditional-link>
</li>

But if I do this it fails:

<li v-for="route in stepPaths['/step'].subRoutes">
  <conditional-link path="{{route.fullPath}}" :path-disabled="pathDisabled">
    <span class="number">{{route.number}}</span>
    {{route.title}} 

    this outputs correct path:
    {{route.fullPath}}

  </conditional-link>
</li>

The path property value is the litteral string {{route.fullPath}}.

I tried path="route.fullPath" but then the path is the litteral string route.fullPath.

How do I get the path value into the path property in a loop? The variable is correct as it renders fine within the inside of the component.

Upvotes: 0

Views: 418

Answers (1)

rgb
rgb

Reputation: 1284

OK it was easy so in case any other newbies run into this, you have to bind the object in the v-for to be able to use the object directly:

<li v-for="route in stepPaths" :route="route">
   <conditional-link :path="route.fullPath" ...

Upvotes: 1

Related Questions