So I have made a custom card in Laravel nova and I want to pass in a URL as metadata and set the href attribute of a link to that URL.
It works but Vue keeps setting the URL to be an internal URL:
I want it to be :
http://foo.peoplebase.test/admin
but when I click the link I end up with is:
http://peoplebase.test/admin/dashboards/http//:foo.peoplebase.test
Here is the Vue file
<template>
<card class="flex flex-col items-center justify-center">
<div class="px-3 py-3">
<h1 class="text-center text-3xl text-80 font-light">{{ card.title }}</h1>
</div>
<div class="px-3 py-3">
<a :href="'http//:' + card.domain + '.peoplebase.test'" class="btn btn-default btn-primary inline-flex items-center relative" target="_blank">Website</a>
<a :href="'http//:' + card.domain + '.peoplebase.test/admin'" class="btn btn-default btn-primary inline-flex items-center relative" target="_blank">Backend</a>
Settings
</div>
</card>
</template>
<script>
export default {
props: [
'card',
// The following props are only available on resource detail cards...
// 'resource',
// 'resourceId',
// 'resourceName',
],
mounted() {
//
},
}
</script>
The normal href on the third link works fine but the dynaimc :href does not.
What am I missing here?
You have a typo! that's why it's not working as expected!
<a :href="'http//:'
change the http//: to http://
<a :href="'http://'
Related
When I get all the records it works:
...
$items = Item::all();
return Inertia::render('Rentals/Items', ['items' => $items]
);
But when I try to paginate, it breaks down:
...
$items = Item::paginate(15);
return Inertia::render('Rentals/Items', ['items' => $items]
);
I get this error:
Uncaught (in promise) TypeError: Cannot read property 'id' of null
Help please. What am I doing wrong? I've been stuck for days.
Creator of Inertia.js here. 👋
So, you can totally use the Laravel paginator with Inertia, you just need to setup your page components to be compatible.
First, make sure you're only returning the items data to the client that you actually need. You can use the new pagination through method for this.
$items = Item::paginate(15)->through(function ($item) {
return [
'id' => $item->id,
'name' => $item->name,
// etc
];
});
return Inertia::render('Rentals/Items', ['items' => $items]);
Next, client side, you'll need a pagination component to actually display the pagination links. Here is an example component from the Ping CRM demo app, built using Tailwind CSS.
<template>
<div v-if="links.length > 3">
<div class="flex flex-wrap -mb-1">
<template v-for="(link, key) in links">
<div v-if="link.url === null" :key="key" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded" v-html="link.label" />
<inertia-link v-else :key="key" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500" :class="{ 'bg-white': link.active }" :href="link.url" v-html="link.label" />
</template>
</div>
</div>
</template>
<script>
import {InertiaLink} from "#inertiajs/inertia-vue3";
export default {
props: {
links: Array,
},
components : {
InertiaLink
}
}
</script>
Finally, to display the items and the pagination links in your page component, use the items.data and items.links props. Something like this:
<template>
<div>
<div v-for="item in items.data" :key="item.id">
{{ item.name }}
</div>
<pagination :links="items.links" />
</div>
</template>
<script>
import Pagination from '#/Shared/Pagination'
export default {
components: {
Pagination,
},
props: {
items: Object,
},
}
</script>
You can find a full working example of this in the Ping CRM demo app. 👍
Just to keep this post updated I'm adding what works for me using vue 3, laravel 8 and inertia 0.10:
In Pagination component I must change the :key attribute just as #AdiMadhava said before, in addition I must use Link component in order to make the page links usables, so my entire #/Shared/Pagination.vue looks like:
<template>
<div v-if="links.length > 3">
<div class="flex flex-wrap mt-8">
<template v-for="(link, key) in links" :key="key">
<div
v-if="link.url === null"
class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
v-html="link.label"
/>
<Link
v-else
class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-primary focus:text-primary"
:class="{ 'bg-white': link.active }"
:href="link.url"
v-html="link.label"
/>
</template>
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
import { Link } from "#inertiajs/inertia-vue3";
export default defineComponent({
components: {
Link,
},
props: {
links: Array,
},
});
</script>
And it works accurately.
I have a variable in my view which I want it's value to change according to a button I press. I tried this but It doesn't work:
<button type="button" data-dismiss="modal" onclick="{{ $product1 = $p->id }}" class="btn btn-primary">Pick</button>
This is inside a #foreach. Is there a way to have the $product1 variable change it's value with the button click? Preferably pure HTML or Laravel. If not, then how do I do it? Javascript?
You could do this easily using a Vue component, create a button for picking the product like so:
<button v-bind:class="buttonColor" #click="pickProduct" v-text="buttonText"></button>
Then create your function to make an Ajax call to update that product and at the same time update your button based on the response.
methods: {
pickProduct() {
axios.post('/product/' + this.productId)
.then(response => {
this.status = response.data;
}
})
}
then just realtime update the button copy and maybe color for when a product is picked
computed: {
buttonText() {
return (this.status=='picked') ? 'Picked' : 'Pick Product';
},
buttonColor() {
return (this.status=='picked') ? 'btn btn-primary' : 'btn btn-secondary';
}
}
If you are looking for an easy solution I would think something like this could work for you.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!-- in your foreach !-->
#foreach($data as $p)
<!-- data-target #openModal{{$p->id}} !-->
<a role="button" data-toggle="modal" data-target="#openModal{{$p->id}}" ></a>
<!-- id = #openModal{{$p->id}} !-->
<div class="modal fade" id="openModal{{$p->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- here your code, for example you can display the id or any data
!-->
<p>Your id: {{$p->id}}</p>
<!-- <p>Your name: {{$p->name}}</p> !-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
#endforeach
You can do this with boostrap,I leave you an example.
This is only to show data, if you want to modify data you have to use js
I am trying to create a search show hide feature. I have a click event that shows the search bar, but if I click somewhere in the put it get removed again. I tried with click.stop but it doesn't work. I am using vue.js inside a laravel project.
Here is my code
<template>
<div>
<div class="menu_srch d-flex" #click.stop="dos">
<i class="fa fa-search search_btn"></i>
<div class="header_serch " v-if="showSearch">
<div class="header_serch_input">
<input type="" name="" placeholder="Search">
</div>
<div class="header_serch_i">
<i class="fa fa-search"></i>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
showSearch : false,
}
},
methods: {
dos(){
this.showSearch = !this.showSearch
}
},
}
</script>
using click.self doesn't even work.. dos method doesn't run when click.self is used.
Vue.js version : "^2.6.11"
You can capture the click event end to stop the propagation one level down.
<template>
<div>
<div class="menu_srch d-flex" #click="dos">
<i class="fa fa-search search_btn"></i>
<div #click.stop class="header_serch" v-if="showSearch">
<div class="header_serch_input">
<input type name placeholder="Search">
</div>
<div class="header_serch_i">
<i class="fa fa-search"></i>
</div>
</div>
</div>
</div>
</template>
Or you need to restructure your template.
<template>
<div>
<div class="menu_srch d-flex" #click="dos">
<i class="fa fa-search search_btn"></i>
</div>
<div class="header_serch" v-if="showSearch">
<div class="header_serch_input">
<input type name placeholder="Search">
</div>
<div class="header_serch_i">
<i class="fa fa-search"></i>
</div>
</div>
</div>
</template>
Is it possible to use the built in Laravel Nova confirm dialogue in your own tool? All I would like to use is interact with it how Nova does itself.
The docs are quite light on the JS topic, as the only built in UI you seem to be able to work with is the toasted plugin: https://nova.laravel.com/docs/1.0/customization/frontend.html#javascript
You can use <modal> component whenever you want.
Here is how it work internally in Nova:
<template>
<modal
data-testid="confirm-action-modal"
tabindex="-1"
role="dialog"
#modal-close="handleClose"
class-whitelist="flatpickr-calendar"
>
<form
autocomplete="off"
#keydown="handleKeydown"
#submit.prevent.stop="handleConfirm"
class="bg-white rounded-lg shadow-lg overflow-hidden"
:class="{
'w-action-fields': action.fields.length > 0,
'w-action': action.fields.length == 0,
}"
>
<div>
<heading :level="2" class="border-b border-40 py-8 px-8">{{ action.name }}</heading>
<p v-if="action.fields.length == 0" class="text-80 px-8 my-8">
{{ __('Are you sure you want to run this action?') }}
</p>
<div v-else>
<!-- Validation Errors -->
<validation-errors :errors="errors" />
<!-- Action Fields -->
<div class="action" v-for="field in action.fields" :key="field.attribute">
<component
:is="'form-' + field.component"
:errors="errors"
:resource-name="resourceName"
:field="field"
/>
</div>
</div>
</div>
<div class="bg-30 px-6 py-3 flex">
<div class="flex items-center ml-auto">
<button
dusk="cancel-action-button"
type="button"
#click.prevent="handleClose"
class="btn text-80 font-normal h-9 px-3 mr-3 btn-link"
>
{{ __('Cancel') }}
</button>
<button
ref="runButton"
dusk="confirm-action-button"
:disabled="working"
type="submit"
class="btn btn-default"
:class="{
'btn-primary': !action.destructive,
'btn-danger': action.destructive,
}"
>
<loader v-if="working" width="30"></loader>
<span v-else>{{ __('Run Action') }}</span>
</button>
</div>
</div>
</form>
</modal>
</template>
<script>
export default {
props: {
working: Boolean,
resourceName: { type: String, required: true },
action: { type: Object, required: true },
selectedResources: { type: [Array, String], required: true },
errors: { type: Object, required: true },
},
/**
* Mount the component.
*/
mounted() {
// If the modal has inputs, let's highlight the first one, otherwise
// let's highlight the submit button
if (document.querySelectorAll('.modal input').length) {
document.querySelectorAll('.modal input')[0].focus()
} else {
this.$refs.runButton.focus()
}
},
methods: {
/**
* Stop propogation of input events unless it's for an escape or enter keypress
*/
handleKeydown(e) {
if (['Escape', 'Enter'].indexOf(e.key) !== -1) {
return
}
e.stopPropagation()
},
/**
* Execute the selected action.
*/
handleConfirm() {
this.$emit('confirm')
},
/**
* Close the modal.
*/
handleClose() {
this.$emit('close')
},
},
}
</script>
Here is simplified example:
<modal>
<form
autocomplete="off"
class="bg-white rounded-lg shadow-lg overflow-hidden"
>
<div>
<heading :level="2" class="border-b border-40 py-8 px-8">test</heading>
test
</div>
<div class="bg-30 px-6 py-3 flex">
<div class="flex items-center ml-auto">
<button
type="button"
class="btn text-80 font-normal h-9 px-3 mr-3 btn-link"
>
{{ __('Cancel') }}
</button>
<button
ref="runButton"
type="submit"
class="btn-danger"
>
<span>{{ __('Run Action') }}</span>
</button>
</div>
</div>
</form>
</modal>
You need to create a new component in the same folder of Tool.vue
I'll attach the component I used here
Then in the "handleConfirm" method, you can add a Ajax call to API
You can add you logic in that API.
You can find the API file in path, ToolName/routes/api.php
/* CustomModal.vue */
<template>
<modal tabindex="-1" role="dialog" #modal-close="handleClose">
<form #keydown="handleKeydown" #submit.prevent.stop="handleConfirm" class="bg-white rounded-lg shadow-lg overflow-hidden w-action">
<div>
<heading :level="2" class="border-b border-40 py-8 px-8">Confirm action</heading>
<p class="text-80 px-8 my-8"> Are you sure you want to perform this action? </p>
</div>
<div class="bg-30 px-6 py-3 flex">
<div class="flex items-center ml-auto">
<button type="button" #click.prevent="handleClose" class="btn btn-link dim cursor-pointer text-80 ml-auto mr-6">
Cancel
</button>
<button :disabled="working" type="submit" class="btn btn-default btn-primary">
<loader v-if="working" width="30"></loader>
<span v-else>Confirm</span>
</button>
</div>
</div>
</form>
</modal>
</template>
<script>
export default {
methods: {
handleConfirm() {
// Here you can add an ajax call to API and you can add your logic there.
},
handleClose() {
// Logic to hide the component
},
},
}
</script>
For more detailed explanation : https://medium.com/vineeth-vijayan/how-to-use-confirm-dialogs-in-a-laravel-nova-tool-b16424ffee87
I am working on the CRUD part of a Laravel app.
It is supposed that when the delete button of an entry is clicked, a modal show up and ask user to confirm delete the corresponding entry or not.
I tried to do this but it said the method written in vue modal template is not defined in the JS console of chrome browser when I clicked the button.
Sure I have defined it. Why does this happen and how to fix it?
If there is any similar example that demonstrate how to do it in vue,
please provide the link. Thanks!
This is the structure of my frontend code.
The blade.php
<button id="show-modal" class="btn btn-danger"
#click="triggerDeleteModal($project)">
delete</button>
<modal-delete></modal-delete>
/resources/js/app.js
Vue.component('modal-delete', require('./components/ModalDelete.vue'));
/resources/js/components/ModalDelete.vue
<template>
<div class="modal fade" tabindex="-1"
role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['project'],
methods: {
triggerDeleteModal(project) {
alert('Did something!' + project + " - project : " + this.project);
}
}
}
</script>
You got two options here. First the one LakiGeri mentioned you put the button inside the vue-template.
The second way is you just calling the the blade.php and you call two templates. First the template with the button and the modal-delete call. And after this you $emit the function from the inside of the modal-delete template.
Vue.js emit events
I would suggest the second way because so you can reuse the modal-delete Template.
I show you one of my examples: create.blade.php
...
#section('content')
<p>Neues Raster anlegen</p>
<div class="col-md-12">
<gridunits></gridunits>
</div>
#endsection
Now calling the first template gridunits. Inside this i forward the methods for the emit-events remove and add to the second template.
<template>
...
<div class="form-group">
<gridunititems
v-for="gridunit in request.gridunits"
:key="gridunit.id"
:gridunit="gridunit"
#remove="removeGridUnit"
#add="addGridUnit"
>
</gridunititems>
</div>
...
</template>
<script>
...
methods: {
addGridUnit(id) {
//doing things
},
removeGridUnit(idToRemove) {
//doing things
},
...
</script>
Second template gridunititems
<template>
...
<div class="input-group-append">
<button type="button" class="btn btn-outline-success" #click.prevent="$emit('add',gridunit.id)">+</button>
</div>
<div class="input-group-append">
<button type="button" class="btn btn-outline-danger" #click.prevent="$emit('remove',gridunit.id)">-</button>
</div>
...
</template>
create.blade.php calling first template
gridunits.vue calling second template and methods in script
gridunitsitems.vue button who emitting event