I have a main App.vue with sub components inside. I am trying to get the scrolling from within my MovieScreenComponent to trigger another action in HeaderComponent. Is this possible? Otherwise, I'd have to have everything in the same component. This is code setup I have right now.
App.vue
<template>
<GridLayout>
<HeaderComponent />
<MovieScreenComponent />
</GridLayout
</template>
<script>
import HeaderComponent from './components';
import MovieScreenComponent from './components';
</script>
MovieScreenComponent.vue
<template>
<GridLayout>
<ScrollView scroll="onScroll"/>
</GridLayout
</template>
<script>
export default {
methods: {
onScroll: function() {
** How can I change something from within the HeaderComponent, such as image opacity, when I am within another component like this **
}
}
}
</script>
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>
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>
I know I can register global components in the file located in resources/js/app.js.
I know when I do this I can use these component in any place (because they are global).
But I don't want that. I have a big application and different functionalities solved in different routes. So I don't want the whole components available in all my views.
How can I register locally the components I want to be available only in one view?
Thanks
Vue js register component in local:
step-1 ) storing the component object in a variable:
var demo = {
data: function() {
return {
message: 'This is a local components.'
};
},
template: `
<div>
<h1>Component: {{ message }}</h1>
</div>
`
};
Step-2 ) Add a component property with the components that we want to register locally.
new Vue({
el: '#app1',
components: { /*Here we have added property*/
'demo': demo
}
});
Step-3 ) Template
<div id="app1">
<demo></demo>
</div>
*Notice: This property should be an object and contain key-value pairs of tag names and configuration objects.
You can do it by importing the component in your parent vue component
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from '#/folder/ChildComponent'
export default {
components: {
ChildComponent
},
}
</script>
Here is the approach that I follow.
Create a new file in your components folder in resources/js/components/YourComponent.vue
<template>
<div>
<h2>My awesome component</h2>
</div>
</template>
<script>
export default {
}
</script>
And in the view where you want the component, you can import it like below
<template>
<div>
<h2>Import another component</h2>
<awesome-component></awesome-component>
</div>
</template>
<script>
import awesomeComponent from "./components/YourComponent.vue";
export default {
components: {
'awesome-component': awesomeComponent
}
}
</script>
I'm taking over a project that has a lot of AJAX loaded HTML snippets. I want to progressively introduce Vue.js where I can. I'm not trying to async load any component definitions or javascript, but I would like to load an HTML snippet that has a v-on:click binding like this:
<button class="btn btn-primary" v-on:click="showModal=true">
Show Modal Dialog
</button>
Is there anyway for vuejs to parse html snippets that come down from jQuery and read the v-* attributes?
You can use <v-runtime-template> to load Vue template strings at runtime:
<template>
<div id="app">
<template v-if="template">
<v-runtime-template :template="template"></v-runtime-template>
</template>
<div v-else>Loading...</div>
</div>
</template>
<script>
export default {
data() {
return {
template: ''
}
},
mounted() {
this.template = this.getVueTemplateFromServer();
},
methods: {
getVueTemplateFromServer() { /*...*/ }
}
}
</script>
demo
I am newbie to react js.
After couple of hours finally I have some login box code rendering.
But the issue is I am unable to bind click event on button.
What i am using.
Laravel 5.6
react js (16.3.1)
What i have tried until now is
https://www.tutorialspoint.com/reactjs/reactjs_events.htm
https://reactjs.org/docs/handling-events.html
This is my final code
import React, {Component} from 'react';
import {Page, Card, Button,List,TextField} from '#shopify/polaris';
export default class Login extends React.Component {
constructor() {
super();
this.loginBtbClicked = this.loginBtbClicked.bind(this);
}
loginBtbClicked() {
debugger;
console.log('Hello');
}
render() {
debugger;
/* Some css code has been removed for brevity */
var divStyle = {
width: '500px'
};
return (
<div className="mt-5 mx-auto" style={ divStyle }>
<Card title="Login" subdued sectioned>
<div>
<TextField label="Store Url" type="text" helpText='ex. store.myshopify.com'></TextField>
</div>
<div className="mt-5">
<Button size="large" fullWidth primary onClick = {this.loginBtbClicked} >Login</Button>
</div>
</Card>
</div>
);
}
}
Also help me with best practice in react js for form submit and click event.
Here is the link for github project
https://github.com/little-isaac/shopify-polaris-laravel-test.git
I have changed webpack.mix.js file's path
From
mix.react('resources/assets/js/app.js', 'public/app.js')
to
mix.react('resources/assets/js/app.js', 'js/app.js')
And forget to change public path
mix.setPublicPath('');