I would like to use glidejs inside a vuejs component, although I couldn't make it work so far.
Is it possible to achieve this? Does vuejs support such a thing?
my code:
<template>
<div>
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">0</li>
<li class="glide__slide">1</li>
<li class="glide__slide">2</li>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
</div>
</div>
</div>
</template>
<script>
import Glide from '#glidejs/glide'
new Glide('.glide').mount() // this is probably wrong
export default {
name: 'Carousel',
}
</script>
<style scoped>
#import '../assets/styles/glide/glide.core.min.css';
</style>
The main fix needed in your code is to move the Glide initialization to the mounted() hook, which runs when the component has mounted in the document, enabling the .glide selector given to the Glide constructor to be found:
<script>
import Glide from '#glidejs/glide'
export default {
mounted() {
new Glide('.glide').mount()
},
}
</script>
demo
Related
I remember I have seen once how to put the values in the html text area after importing components in VUE.
I'm not sure there is a way to do that or I just remember things in a wrong way.
my code is as below.
<template>
<div class="container">
<div class="row">
<Heading></Heading>
</div>
<hr>
<div class="row">
<div class="col-xs-12 col-sm-6">
<ul class="list-group">
<comp v-for='(value,index) in listing' :key='index'>{{value}}</comp>
</ul>
</div>
<serverstat></serverstat>
</div>
<hr>
<div class="row">
<footing></footing>
</div>
</div>
</template>
<script>
import Heading from './assets/Heading.vue';
import comp from './assets/comp.vue';
import serverstat from './assets/serverstatus.vue';
import footing from'./assets/footing.vue';
export default {
data() {
return {
listing: ['max','toms','judy','michael','dumdum']
}
},
components: {
Heading,comp,serverstat,footing
},
};
</script>
<style>
</style>
-comp-
<template>
<li class="list-group-item">
</li>
</template>
<script>
export default {
}
</script>
<style>
</style>
After I render this,
it doesn't show {{value}}. It only shows blank .
How do I insert the {{value}} within the html element?
Thank you in advance.
Since you are entering a value inside of a component, you can render it by using a slot in your component like this:
<template>
<li class="list-group-item">
<slot />
</li>
</template>
<comp v-for='(value,index) in listing' :key='index'>
<slot>{{ value }} </slot>
</comp>
Then in comp component use slot as
<slot/>
Not including the approach for props as you don't want to use that. Use the link above to learn more about slots.
When you use v-for it calls all the value from an array and :key='index' defines each object row from an array. If your object listing consists of firstname, lastname as your object then the value you want to print will be {{value.firstname}}. You are missing object name in value.
Can you try this once :
<comp v-for='(value,index) in listing' :key='index'>{{value.index}}</comp>
I got stucked with Vue.js. I am trying to basically wrap a component(that is already inside one component) into one more. I have a dropdown with a select and I call a function on change. Everything works fine until I wrap the component in one more on top. The top level one is in blade as it's used with Laravel. Snippets:
Component with dropdown:
<template>
<div id="watchlist-item">
<select #change="changed()" class="form-control"
id="currencies" name="currencyList">
<option value="USD" selected="selected">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
</template>
<script>
export default {
name: "watchlist-item.vue",
methods: {
changed() {
alert("CHANGED");
},
},
}
</script>
Wrapper:
<template>
<div id="watchlistItem">
<watchlist-item></watchlist-item>
</div>
</template>
<script>
export default {
name: "watchlist"
}
</script>
Top component:
<template>
<div id="watchlist">
<watchlist></watchlist>
</div>
</template>
<script>
export default {
name: "main-component"
}
</script>
Blade template:
#extends('layouts.layout')
<div>
{{-- <div id="maincomponent">--}}
{{-- <main-component></main-component>--}}
{{-- </div>--}}
<div id="watchlistItem">
<watchlist-item></watchlist-item>
</div>
</div>
This works fine and i get alert on change. However, when i uncomment the commented part and vice-versa (so basically wrap it one more time) vue stops aletring me. I find this behaviour pretty weird but I am just starting with Vue so maybe its just a small detail I'm missing. I don't really even know what to search for though, so any help would be greatly appreciated. Thank you.
Just make sure that you are importing child components inside it's parent correctly:
main-component > watchlist > watchlist-item
| |
has has
Well it doesnt work because you need to register it via components, but first you need to import it.
<template>
<div id="watchlistItem">
<watchlist></watchlist>
</div>
</template>
<script>
import watchlist from "path/to/watchlist";
export default {
name: "watchlist",
components: {
watchlist: watchlist
}
}
I have a component that emit event through a bus as indicated below. The same component need to be included twice on another component. I want the events emitted to populate different variables;
//component.vue
<template>
<div>
Hello there?
<a #click="changed">New</a>
<ol>
<li v-for="option in list">
<div class='row justify-content-start'>
<div class='col-sm-6'><input v-model="option.value" type='text' placeholder="key"/></div>
<div class='col-sm-6'><input v-model="option.name" type='text' placeholder="Name"/></div>
</div>
</li>
</ol>
</div>
</template>
<script>
export default{
props:['options','iscolumn'],
data(){
return {list:this.options,item:{name:'',value:''}}
},
methods:{
changed(){
$bus.$emit('add-option',this.item,this.iscolumn);
}
}
}
</script>
/** root.vue **/
<template>
<div>
<h3>Rows</h3>
<div><rows :options="rows" :iscolumn="false"/></div>
<h3>Columns</h3>
<div><rows :options="columns" :iscolumn="true" /></div>
</div>
</template>
<script>
export default{
components:{'rows':require('./component')},
data(){
return {
columns:[],rows:[]
}
},
created(){
this.$bus.$on('add-option',(option,iscolumn)=>{
if (is_column) {this.columns.push(option);}
else this.rows.push(option);
})
}
}
</script>
When I click on the New from root both columns and rows get populated.
Looking for case where each of the component are independent, can't understand how they are sharing variables.
Any assistance will be appreciated.
Assign unique key attributes to the rows components:
<template>
<div>
<h3>Rows</h3>
<div><rows key="rows1" :options="rows" :iscolumn="false"/></div>
<h3>Columns</h3>
<div><rows key="rows2" :options="columns" :iscolumn="true" /></div>
</div>
</template>
I am developing a simple web app with Meteor and Vue and I came across this problem. Cannot find element: #app. I have searched and searched, added some 'solutions' to my problem but still no result.
missionPage.vue
<template>
<div class="ui center aligned container ">
<div class="missionPage">
<h3 class="ui header">Our story</h3>
<p>{{text1}}</p>
<p>{{text2}}</p>
<h1>Trigger question?</h1>
<a href="#" type="button" id="scrollDownArrow"><i class="huge angle double
down icon" ></i></a>
</div>
</div>
</template>
<script>
import { Session } from 'meteor/session';
export default {
data() {
return {
text1:'abc',
text2:'def'
}
},
}
</script>
missionPage.html
<template name='missionPage'>
<div id="app">
</div>
</template>
missionPage.js
import { Template } from 'meteor/templating';
import { Session } from 'meteor/session';
import { Vue } from 'meteor/akryum:vue';
import missionPage from '/client/template/missionPage.vue';
window.onload=function(){
var app = new Vue({
el: '#app',
render:h=>h(missionPage)
})
}
It seems that it doesn't recognize the #app id which is mind-blowing in my opinion. I have exactly the same code ran in another app and it works perfectly. I have red other posts and added the 'window.onload' function as it turns out that the reason why the element is not recognized is that it was not loaded but still the error persists.
i am trying to create a customElement, which uses a jquery plugin to create a slideshow. For this plugin, there is no jspm package ofc. I didn't want to create one, because i'm not pretty familiar with jspm.
so i added the js-file and its dependencies to the systemloader and it also gets loaded.
Now i wanted to create a customElement, which has a bind-method that will call the plugin with the custom element. (See my code down there). The problem is, the constructor or the bind method are not invoked at all. Nothing is rendered.
*.js:
import {bindable, customElement, inject} from 'aurelia-framework';
import $ from 'jquery';
import 'jquery.bxslider';
#customElement('slider')
export class NewsSlider {
constructor(element)
{
this.elem = element;
}
bind() {
console.log('test');
}
#bindable items;
}
*.html:
<template>
<ul class="bxslider" ref="slide">
<li repeat.for="newsItem of items">
<div class="slide-container quote" css="background-image: url('/backend/content/${newsItem.Image}'); background-size: cover; height: 650px;">
<div class="overlay">
<h2> ${newsItem.Title} </h2>
<p> ${newsItem.Content} <p/>
</div>
</div>
</li>
</ul>
</template>
Usage:
<template>
<require from="./slider" />
<p repeat.for="new of news">
${new.Content}
</p>
<slider items.bind="news"></slider>
</template>