How do I pass a slot or a prop to a layout component in inertia?
For example, heres a ForgotPassword component:
<template>
<slot name="title">Forgot Password</slot>
Forgot pw stuff goes here...
</template>
<script>
import CardLayout from "#/Layouts/CardLayout";
export default {
layout: CardLayout,
}
Here is the CardLayout component:
<template>
<h1>{{ $slots.title }}</h1>
<slot/>
</template>
Nothing shows up inside the h1 tag...
Adding this here as the solution above does not work. You can pass data to the Layout component by setting a prop value
layout: (h, page) => h(Layout, { somePropDataDefinedInLayout: value }, () => page)
// CardLayout
<template>
<h1><slot name="title" /></h1>
<slot />
</template>
// ForgotPassword
<template>
<template #title>Forgot Password</template>
Forgot pw stuff goes here...
</template>
Related
I need to have a custom layout or remove default layout for my signIn page. Based on Nuxt3 docs you can set layout with definePageMeta({layout: "custom"}) or remove definePageMeta({layout: false}) however when I set it to false or "custom" I get a TypeError.
The definePageMeta does change the layout. However, there are instances where when you first load the signIn page it doesn't show anything and shows the TypeError above. Any advice on how to solve this issue is greatly appreciated!
Btw, I just recently started using nuxt3, never had this issue in nuxt2.
// sign in page
<template>
<div>
<NuxtLayout name="custom">
<v-row>Sign In Page</v-row>
</NuxtLayout>
</div>
</template>
<script lang="ts" setup>
definePageMeta({
layout: 'custom',
})
</script>
// layout custom.vue
<template>
<v-app>
<v-main>
<v-container fluid>
<slot />
</v-container>
</v-main>
</v-app>
</template>
To create layout in nuxt 3 you must add slot.
// custom layout
<template>
<div class="custom-layout">
<slot/>
</div>
</template>
and then in your page component add layout: 'custom' in definePageMeta in setup script.
<template>
// YOUR PAGE
</template>
<script setup lang="ts">
definePageMeta({
layout: "custom",
});
</script>
if you need app.vue you must add NuxtLayout to it
// app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
I want to pass a parameter to Vue component. please help
Blade
#extends("./layouts.app")
#section("title")
{{$shop->shop_name}}
#endsection
#section("content")
<addToCart></addToCart>
#endsection
Vue Js
<template>
<div class="button-container">
<button #click="addToCart(product_id)">Add To Cart</button>
</div>
</template>
In your Vue Js
add new prop array
<template>
<div class="button-container">
<button #click="addToCart(product_id)">Add To Cart</button>
</div>
</template>
<script>
export default {
props: ["product_id"],
methods: {
addToCart(product_id)
{
//code
}
}
</script>
in your Blade add :product_id ="product id", in addToCart component.
#extends("./layouts.app")
#section("title")
{{$shop->shop_name}}
#endsection
#section("content")
<addToCart :product_id="***product id goes here***"></addToCart>
#endsection
You should follow these steps to access product_id
inside your addToCart component add product_id like this:
#section("content")
<addToCart :product_id="$product_id"></addToCart>
#endsection
in your component you should get the :product_id with props array like below :
<template>
<div class="button-container">
<button #click="addToCart(product_id)">Add To Cart</button>
</div>
</template>
<script>
export default {
props: ["product_id"],
methods: {
addToCart(product_id) {
//code
}
}
</script>
Note: I suppose that you have the product_id and you do the other part of component correct.
Im using laravel, vue, and bootstrap-vue.
I have created a vue component that displays a table of elements (subnets in this example).
For each of them I show a component (modal_edit-subnet) thats should open a modal that allows to edit the data of the element of the related row.
The problem is that it shows modals for all of the table elements. For example, if the table has 3 rows, it shows 3 modals (after closing one it shows the next). Each of the modals with the data of each of the rows.
I've tried to add "key"s but no success.
What am i doing wrong?
Thanks!
Component that shows the table
<template>
<div>
<b-card class="text-center">
<b-table small striped hover :items="data_subnets" :fields="fields" :tbody-tr-class="rowClass">
<template slot="[ip_address]" slot-scope="data_subnets">
<b>{{ long2ip(data_subnets.item.ip_address) }}</b>
</template>
<template slot="[actions]" slot-scope="data_subnets">
v-on:deleteSubnet="deleteSubnet"></modal_delete-subnet>
<modal_edit-subnet :key="'modal_edit_subnet' + data_subnets.item.id" :subnet="data_subnets.item" v-on:editSubnet="editSubnet"></modal_edit-subnet>
</template>
</b-table>
</b-card>
</div>
</template>
Modal modal_edit-subnet
<template>
<div>
<b-button size="sm" v-b-modal.modal-edit-subnet>Edit</b-button>
<b-modal
id="modal-edit-subnet"
ref="modal"
title="Edit subnet"
#ok="handleOk"
>
This is subnet {{data_subnet.id}}
</b-modal>
</div>
</template>
The problem is that:
You're rendering a modal for each row of the table and;
Reading the docs, it seems like the modal is triggered by the id, and your b-modal id is not dynamic depending on the row.
How to fix it:
Use just one modal on the b-table level
Dynamically inject id into your modal_edit-subnet component:
<template>
<div>
<b-button size="sm" v-b-modal[id]>Edit</b-button>
<b-modal
:id="id"
ref="modal"
title="Edit subnet"
#ok="handleOk"
>
This is subnet {{data_subnet.id}}
</b-modal>
</div>
</template>
<script>
export default {
props: {
id: {
type: String | Number
}
}
}
</script>
Use v-model (this is the way I would do it)
<template>
<div>
<b-button size="sm" #click="show = true">Edit</b-button>
<b-modal
v-model="show"
ref="modal"
title="Edit subnet"
#ok="handleOk"
>
This is subnet {{data_subnet.id}}
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
}
}
</script>
I have a for that will create a component for each index.
In this component, I have a child div containing edit, add, minus buttons.
I would like it to be displayed on the component mouseover.
How do I achieve this dynamically without having to play with indexes ?
Thank you kindly.
Post component
<template>
<div v-on:mouseleave.native="showOperations = false"
v-on:mouseover.native="showOperations = true">
<!-- post data -->
<div v-if="showOperations">
<!-- operations -->
</div>
</div>
</template>
<script>
export default {
...
data () {
return {
showOperations: false
}
},
...
</script>
List of post
<post v-for="post in posts"
:key="post.id"
:post="post">
</post>
This pattern works for me and I think it works for you as well
I am learning vue+laravel. I want to pass value from one component to other component? I have used vue router for routing.
Here is the code for first and second component.
SelectPerson.vue
<template>
......
<div>
<input type="number" class="form-control" name="numberOfPersons" placeholder="Enter number of persons here" **v-model="inputPersons"**>
<br>
**<SelectTimeSlot v-bind:numberOfPersons="inputPersons"></SelectTimeSlot>**
</div>
<div>
<button class="btn btn-default float-right mt-2" v-on:click="selectTimeSlots">Next</button>
</div>
......
</template>
<script>
import SelectTimeSlot from './SelectTimeSlot.vue'
export default{
props:['numberOfPersons'],
data(){
return{
**inputPersons:0**
}
},
methods:{
selectTimeSlots(){
this.$router.push({name:'SelectTimeSlot'});
}
}
}
</script>
second component
SelectTimeSlot.vue
<template>
<h5>Welcome, You have selected **{{numberOfPersons}}** persons.</h5>
</template>
Can anybody help me do it?
To pass data from one component to other component, you need to use props:
First component:
<second-component-name :selectedOption="selectedOption"></second-component-name>
<script>
export default {
components: {
'second-component-name': require('./secondComponent.vue'),
},
data() {
return {
selectedOption: ''
}
}
}
</script>
Second Component:
<template>
<div>
{{ selectedOption }}
</div>
</template>
<script>
export default {
props: ['selectedOption']
}
</script>
Please visit this link.
Hope this is helpful for you!
Say I have a page with this HTML.
<div class="select-all">
<input type="checkbox" name="all_select" id="all_select">
<label #click="checkchecker" for="all_select"></label>
</div>
the function checkchecker is called in my methods
checkchecker() {
this.checker = !this.checker
}
This will show or hide my div on that page like this
<div v-show="checker === true" class="select-all-holder">
<button>Select All</button>
</div>
Now if I also want to toggle another div which is inside my child
component on that page I will pass the value like this.
<div class="content-section clearfix">
<single-product :checkers="checker"></single-product> //This is calling my child component
</div>
Now in my Child component I will have a prop declared like this
checkers: {
type: String,
default: false,
},
This is how I will write my div in my child component
<div v-show="checkers === true" class="select-holder clearfix">
<input type="checkbox" class="unchecked" name="single_select" id="1">
</div>