i need to use more than one slider in my site, i done it by import Vueslick to child component one by one, but i want to import only one Slick library, this is my idea:
<pre><code>
<template>
<div>
<slider :slickOptionsSlider='slickOptionsSlider'></slider>
<blogsuckhoe :slickOptionsBlogsuckhoe='slickOptionsBlogsuckhoe' ></blogsuckhoe>
</div>
</template>
<script>
data() {
//import slick vĂ child component
return {
slickOptionsSlider: {
autoplay:true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
dots:false,
arrows:false,
},
slickOptionsBlogsuckhoe: {
autoplay:true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
dots:false,
arrows:false,
},
};
}
</script>
</code></pre>
sure, it is not working. Can you help me ? Thank you . Im sorry for my bad English.
You can register it as a global component.
app.js
Vue.component('vue-slick',require('vue-slick').default);
Then use it anywhere inside your root element, within a component or directly in a blade template.
SomeComponent.Vue
<vue-slick :options='options'></vue-slick>
some.blade.php
<vue-slick :options='#json($options)'></vue-slick>
Related
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 have read the docs and dozens f stackoverflow topics about implementing CKeditor with the upload adapter CKfinder. But none are in vue. Only about CKeditor but nothing about the CKfinder. The docs are so unclear to me and I have read some other topics complaining about it too. So I hope someone here can help me to understand how this works.
So this is what I have right now:
<template>
<section class="j-input-text-editor row">
<label v-if="label" :class="label_class">
{{label}}
</label>
<div :class="input_class">
<ckeditor ref="editor" :editor="editor" v-model="mValue" #input="updateValue"></ckeditor>
</div>
</section>
</template>
<script>
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
export default {
name: "textEditor",
data() {
return {
mValue: '',
editorData: '<p>Content of the editor.</p>',
editor: ClassicEditor,
}
},
created() {
ClassicEditor
.create( this.$refs.editor, {
ckfinder: {
uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json' // here you can set your own file path
}
} )
.then(console.log('yeay'))
.catch(console.log('error'));
},
}
</script>
So i tried uploading an image in the editor and i get this:
Like I said. I'm totally stuck at this point and bin trying sins friday (weekend I had not to work obviously)
P.S. am also using laravel, do I need something in the back-end?
P.S.S. My english is not the best, I know. If I need to explain more clear what my problem is then I will try my best to do that for you.
You could install CKeditor. You can download it from: https://ckeditor.com/ckfinder/download/
They have a Laravel package as well: https://github.com/ckfinder/ckfinder-laravel-package
I want to import this library into my laravel project. I have run npm install vue-simple-lightbox and then in my blade template i have this code
#extends('layouts.app')
#section('content')
{{-- some html code --}}
<div class="row">
</div>
<div class="row">
<lightbox id="mylightbox" :images="images" :image_class="'img-responsive img-rounded'" :album_class=" 'my-album-class' " :options="options"></lightbox>
{{-- more html code --}}
</div>
#endsection
<style type="text/css">
.dropdown, .dropdown-menu {
width: 100%;
}
</style>
#section('scripts')
// import the library here?
<script type="text/javascript">
let app = new Vue({
el: '#app',
data() {
return {
images : [
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',
title : 'Image 2'
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img2.jpg',
title : 'Image 3'
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img3.jpg',
title : ''
},
{
src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img4.jpg',
title : ''
},
],
options : {
closeText : 'X'
}
};
},
mounted() {
},
});
</script>
#endsection
Where should i import the library? I tried to import it into app.js file using this code window.Lightbox = require('vue-simple-lightbox');, but then how do i use it? It seems the blade template have no idea what is 'lightbox'.
I am getting this error
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What is the correct way of importing the library and then use it inside the blade template? Thanks!
Extract your js code to a single file, blade templates are not compiled and it wont work if you import it there.
So copy everything over to say, app.js, then include it via a script tag
Inside app.js you can import lightbox from 'vue-simple-lightbox'
Now, make sure you add it to your webpack.mix file through
.js('path/to/app.js', 'public/js/app.js')
That way the library will get compiled into the asset.
Now, regarding the VUE tempalte not finding the lightbox component.
You forgot to add the component part of the Vue instance:
import Lightbox from 'vue-simple-lightbox'
export default {
components: {
Lightbox //HERE
},
...
You can import the file directly from GitHub:
<script src="https://github.com/vrajroham/vue-simple-lightbox/blob/master/dist/vue-simple-lightbox.js"></script>
Is there any way to reload the sidebar component from other vue component ?
I got a menuLabel at the sidebar which will show the number of order in pending status. So I want to update the sidebar menuLabel whenever I change the status from pending to others.
For example, When I click submit or some button in SalesOrder.vue, I want to reload the sidebar.
Sample component code:
export const Routes = [
{
path: '/admin',
components: { default: ThemeContent, header: ThemeHeader, sidebar: ThemeSidebar, footer: ThemeFooter },
children: [
{ path: 'dashboard', component: DashboardAdmin },
{ path: 'salesorder', component: SalesOrder},
],
meta: { requiresAdmin: true }
},
You can separate 1st sidebar to external component and 2nd to another. Then include both components to your sidebar block and hide/show them whenever you want.
<sidebar>
<first-sidebar :trigger="boolean"></first-sidebar>
<second-sidebar :trigger="boolean"></second-sidebar>
</sidebar>
Then in your first sidebar component
<template>
<div v-if="trigger">
<!-- ... -->
</div>
</template>
<script>
export default {
props: ['trigger']
}
</script>
And finally second sidebar component
<template>
<div v-if="!trigger">
<!-- ... -->
</div>
</template>
<script>
export default {
props: ['trigger']
}
</script>
Thanks everyone for helping me, I have found a way for me to interact from one component to another which is using a bus event vuejs.
https://alligator.io/vuejs/global-event-bus/
I've a paper-dropdown-menu element. How can I show a different selected label, than valueattr is targeting at?
<link rel="import" href="components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="components/paper-item/paper-item.html">
<polymer-element name="my-dropdown-element" attributes="selectedModus">
<template>
<paper-dropdown-menu label="Modus" on-core-select="{{modusSelect}}">
<paper-dropdown class="dropdown">
<core-menu class="menu" selected="{{selectedModus}}" valueattr="val">
<template repeat="{{d in data}}">
<paper-item val="{{d.val}}">{{d.text}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>
<script>
Polymer('my-dropdown-element', {
data: [],
ready: function() {
this.data = [];
var entry = {
val: 0,
text: 'Aus'
};
this.data.push(entry);
entry = {
val: 1,
text: 'Ein'
};
this.data.push(entry);
entry = {
val: 2,
text: 'Auto'
};
this.data.push(entry);
entry = {
val: 3,
text: 'Auto (Absenken)'
};
this.data.push(entry);
}
});
</script>
</polymer-element>
When I set selectedModus = 2, the highlighted Item in the opened dropdown is auto. This is correct. But in the dropdown label there is always 0, 1, 2, 3 and not the text representation of the dropdown.
Please help me
Thanks.
edit:
I've deleted all Polymer components from my project. Then I've updated all dependencies via bower from the master's branch of each component.
Now the correct label is showing in the closed dropdown. But clicking on the arrows, doesn't open the drop down menu. I'm getting an error in the timinig-utilities.js which can be traced back to paper-dropdown-transistion.html line 152.
Very strange.
Ok i've found the answer to my problem. It seems to be a bug in the current core-animation\web-animations.html. The change mentioned here
https://github.com/zenorocha/core-animation/commit/0d047ce11e5e6b25c02f1d89b2e7aa53588d7316 worked for me.