I'm trying to do something like this:
<div v-for="r in rentals">
<a bind-href="'/job/'r.id"> {{ r.job_title }} </a>
</div>
I can't figure out how to add the value of r.id to the end of the href attribute so that I can make an API call. Any suggestions?
You need to use v-bind: or its alias :. For example,
<a v-bind:href="'/job/'+ r.id">
or
<a :href="'/job/' + r.id">
Or you can do that with ES6 template literal:
<a :href="`/job/${r.id}`"
You can concatenate your static value and dynamic value as string values, while binding href. Using your example:
<div v-for="r in rentals">
<a :href="'/job/' + r.id"> {{ r.job_title }} </a>
</div>
If you want to display links coming from your state or store in Vue 2.0, you can do like this:
<a v-bind:href="''"> {{ url_link }} </a>
This can also help.
<a target="_blank" :href="r.reg_metadato">{{ r.reg_metadato }}</a>
Related
I am trying to add a href link with a variable in my vue template, for some reason it keeps breaking and I have no clue why, it's trying to reference it as a variable rather than a link. the issue is with the "/post/update" href. the "/view-user/ + post.user.id" works fine
<template>
<div id="content">
<div class="post">
<h3>{{post.title}}</h3>
<p>{{post.content}}</p>
<a :href="/view-user/ + post.user.id">
{{post.user.username}}
</a>
<p>{{ post.created_at.split(".")[0] }}</p>
<a :href="/post/update/ + post.id">Edit</a>
</div>
<hr>
<comment :id="id"/>
</div>
The static part of the href value should be wrapped by '' as string :
<a :href="'/view-user/' + post.user.id">
or string template :
<a :href="`/view-user/${post.user.id}`">
in your case it's evaluated as expression.
I am having this issue and I can not find my way around it without duplicating lots of code.
I have an array of entries coming from an axios request. Everything will go in an ul.
If I am doing it like this, everything is ok:
resource-index.blade.php
<ul>
<li v-for="entry in entries" :key="entry.id" >
<div>
<div>
<a :href="entry.links.show">
<x-button-icon color="gray-400">
#include('partials.svg.outline-eye')
</x-button-icon>
<span class="ml-3">{{ __('View') }}</span>
</a>
</div>
<div>
<a :href="entry.links.edit">
<x-button-icon color="gray-400">
#include('partials.svg.pencil')
</x-button-icon>
<span class="ml-3">{{ __('Edit') }}</span>
</a>
</div>
</div>
</li>
</ul>
However, in case I want to try to extract some of that stuff in different components, the details I am sending from Vue no longer get passed to the component.
resource-index.blade.php
<ul>
<li v-for="entry in entries" :key="entry.id" >
<div>
<x-grid-list-item-button label="{{ __('View') }}" :href="entry.links.show">
<x-slot name="icon">
#include('partials.svg.outline-eye')
</x-slot>
</x-grid-list-item-button>
<x-grid-list-item-button label="{{ __('Edit') }}" :href="entry.links.edit">
<x-slot name="icon">
#include('partials.svg.pencil')
</x-slot>
</x-grid-list-item-button>
</div>
</li>
</ul>
And here is the grid-list-item-button.blade.php
<div>
<a href="{{ $href }}">
#if($icon)
<x-button-icon color="gray-400">
{{ $icon }}
</x-button-icon>
#endif
<span class="ml-3">{{ $label }}</span>
</a>
</div>
I already tried:
moving the href="entry.links.show" in a named slot;
passing the data with v-bind: v-bind:href="entry.links.show";
::href="entry.links.show"
Can someone please tell what am I doing wrong or at least point me in the right direction with this?
Thanks!
If I got you right: You are trying to pass data from Vue.Js to Laravel-Components. Unfortunately this is not possible. Blade gets processed on the server-side where Vue.Js is not yet available. So the variable entry.links.show do not yet exist in Laravel (only available on client-side) and therefore cannot be passed to the Laravel-Component. After the HTML got rendered by Blade and passed to the Browser, Vue.Js can pick it up and replicate your template for the v-for and generate your list. At this point your 'link'-variables get available.
Solutions:
You could extract your code to a Vue.Js-Component rather than a Laravel-Component. This would be interpreted on client-side.
An other solution would be to generate this list through Blade so you could use Laravel-Components.
In my web application I use the same url several times with other anchors. Is it possible to somehow "store" the baseurl somewhere?
My code looks like:
<a
class="link"
href="https://google.com/same/index.html#ancor"
target="_blank">
{{ $t("labelLearnMore") }}
</a>
https://google.com is always the same, can I shorten this somehow in vue that the code looks cleaner?
Thank you in advance!
Instead of the a tag, use the router-link provided by vue-router.
The code will be:
<router-link
to="/same/index.html#ancor"
target='_blank'
/>
For more informations take a look to the documentation
<a
class="link"
:href="baseUrl + '/same/index.html#ancor'"
target="_blank">
{{ $t("labelLearnMore") }}
</a>
or es2015
<a
class="link"
:href="`${baseUrl}/same/index.html#ancor`"
target="_blank">
{{ $t("labelLearnMore") }}
</a>
set baseUrl in your vue data
In my vue template I have:
<ul>
<li>slide a</li>
<li>slide b</li>
....
</ul>
But I want to pass in each slide from the parent using a slot, so:
<carousel>
<img src="abc.jpg">
<img src="xyz.jpg">
</carousel>
But how can I loop out what is passed in to each li? So I want to end up with:
<ul>
<li><img src="abc.jpg"></li>
<li><img src="xyz.jpg"></li>
....
</ul>
Also I want to be able to pass in any dom element via the slot to the list element.
As Michael said, you can achieve this behavior via scoped slots.
In your carousel component, the template will look like this :
<ul>
// TODO : Add a :key with a unique identifier
<li v-for="item in items">
<slot name="item" :item="item">
{{ item }}
</template>
</li>
</ul>
And when using the component, you will do something like this :
<carousel :items="images">
<img #item="{ src }" :src="src">
</carousel>
Depending on your images data, you may need to get the source from another property.
How can I update the accordion-item title using a v-for loop inside F7+Vue ? I need each accordian-item title to be set to the Title of each object inside the myList array that is being looped over using the v-for.
Here is example below:
<f7-list-item v-for="value in myList" accordion-item title="{{value.Title}}">
<f7-accordion-content>
<f7-block>
<p>{{value.foo}}</p>
<p>{{value.boo}}</p>
</f7-block>
</f7-accordion-content>
</f7-list-item>
</f7-list>
Due to the time required for me to wrap my head around how I would use the current F7+Vue Accordion with a v-for to inject the title element... it seems that this is not possible. I could be wrong. I ended up resolving this by using the standard non f7+vue components...
example:
<div class="list accordion-list">
<ul>
<li class="accordion-item" v-for="value in myList">
<a href="#" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">{{value.Title}}</div>
</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>{{value.foo}}</p>
<p>{{value.boo}}</p>
</div>
</div>
</li>
</ul>
</div>