Develop Reference

Use multiple modals in template vue.js

I'm trying to create one modal for each row but when i open one modal all the other modals open as well. i suppose this have something to do with the id but i don't know how to fix it.
Using vue#2.6.12
<template #cell(add)="row">
<div>
<b-button
v-b-modal="'row'"
class="bg-dark text-white"
test-id="showOrHideAddButton"
size="sm"
>
add
</b-button>
<b-modal id=row>
Hello From My Modal!
</b-modal>
</div>
</template>

As user3113901 wrote in the comments above ID's should be always unique. Only class could/should be used multiple times.
Here you can see an example how it should work:
<template>
<div>
<b-button
v-b-modal="'row1'" <!-- use unique ID here --->
class="bg-dark text-white"
test-id="showOrHideAddButton"
size="sm"
> add </b-button>
<b-modal id="row1"> <!-- Here you have to put your id-name into "" --->
Hello From My First Modal!
</b-modal>
<b-button
v-b-modal="'row2'" <!-- use unique ID here --->
class="bg-dark text-white"
test-id="showOrHideAddButton"
size="sm"
> add </b-button>
<b-modal id="row2"> <!-- Here you have to put your id-name into "" --->
Hello From My Second Modal!
</b-modal>
</div>
</template>
If you set v-b-modal equal to your id in your <b-modal> and make it all unique it should work out!

Header and Footer load first

Why the header and footer loaded first and the middle content load after a delay. Here is my code.
<template>
<div>
<Header />
<nuxt />
<upper-footer />
<Footer />
</div>
</template>

In index.vue I removed <no-ssr></no-ssr> and it is fixed.
Before:
<template>
<no-ssr>
My Content
</no-ssr>
</template>
After:
<template>
My Content
</template>

Trigger next and previous element in 'vue-owl-carousel' package Vue.js

I have problem with triggering next or previous item in vue-owl-carousel package in Vue with javascript.
Can anybody help?
Carousel code :
<carousel id="newGamesCarousel" :items="1" :dots="false" :nav="false" :margin="10" :key="refresh">
<div class="newGames-item" v-for="item in newProducts">
<div class="details">
<div class="labels flex-wrap">
<span class="mb-1" v-for="platform in item.platforms">{{platform.name}}</span>
<span class="mb-1" v-for="region in item.regions">ریجن {{region.name}}</span>
</div>
<h2 class="gameTitle">{{item.name}}</h2>
<div class="priceBox">
<router-link class="add-to-cart" :to="{path: '/game/'+item.id+'/'+stringToSlug(item.title)+''}">+</router-link>
<div class="price">
<div class="former" v-if="item.sale_percent !== false">
<span class="percent">%{{item.sale_percent}}</span>
<span class="total">{{item.price}}</span>
</div>
<div class="later">
{{item.regular_price}}
<span class="unit">تومان</span>
</div>
</div>
</div>
</div>
<figure class="image">
<img v-bind:src="item.thumbnail_url" v-bind:alt="item.name">
</figure>
</div>
</carousel>
And the next and previous buttons:
<div class="arrows">
<svg class="nextCarousel" id="newGamesNext" viewBox="0 0 24 24">
<use xlink:href="/src/assets/imgs/sprite.svg#arrow"></use>
</svg>
<svg class="prevCarousel" id="newGamesPrev" viewBox="0 0 24 24">
<use xlink:href="/src/assets/imgs/sprite.svg#arrow"></use>
</svg>
</div>

as per documentation described here : https://www.npmjs.com/package/vue-owl-carousel
Custom prev and next buttons using slot, the buttons will be hidden
while start and end in non-loop mode
<carousel>
<template slot="prev"><span class="prev">prev</span></template>
<template slot="next"><span class="next">next</span></template>
</carousel>
within the carousel tag after adding all your slides
you can add <template slot="{{prev/next}}">{{add your icon image here }}</template> and it should take care of the previous and next events on its own
<template slot="prev">
<svg class="nextCarousel" id="newGamesNext" viewBox="0 0 24 24"><use xlink:href="/src/assets/imgs/sprite.svg#arrow"></use></svg>
</template>
this is what I feel should solve your issue. If Im missing something feel free to add urls of documentations/ tutorials that you followed to get your code here. please let me know if the solution worked or not

<v-flex>
<span #click="$refs.prev.click()">
PREVIOUS
</span>
<span #click="$refs.next.click()">
NEXT
</span>
</v-flex>
<v-flex>
<carousel>
<template slot="prev"><span hidden ref="prev" class="prev">prev</span></template>
<template slot="next"><span hidden ref="next" class="next">next</span></template>
</carousel>
</v-flex>

polymer equivalent to ng repeat

I am rewriting a page that is currently using an Angular 1 framework to polymer 1 (or 2). I don't know what the equivalent of ng-repeat is in polymer. This is what I have right now in Angular 1.
<div class="consultant" ng-repeat="consultant in consultants | limitTo:i">
<p>{{consultant.displayName}}</p>
<p ng-if="consultant.phoneNumber != undefined" >☎ {{consultant.phoneNumber}}</p>
<br ng-if="consultant.phoneNumber == undefined" />
<p class="email" ng-if="consultant.email != undefined" ><span class="icon-envelope"></span> {{consultant.email}}</p>
<br ng-if="consultant.email == undefined" />
</div>

What you are looking for is dom-repeat and probably dom-if
In your case this could look something like this:
<template is="dom-repeat" items="[[consultants]]" as="consultant">
<div class="consultant">
<p>[[consultant.displayname]]</p>
<template is="dom-if" if="[[consultant.phoneNumber]]">
<p>☎ [[consultant.phoneNumber]]</p>
</template>
<template is="dom-if" if="[[!consultant.phoneNumber]]"><br></template>
<template is="dom-if" if="[[consultant.email]]">
<p class="email">
<span class="icon-envelope"></span>
[[consultant.email]]
</p>
</template>
<template is="dom-if" if="[[!consultant.email]]"><br></template>
</div>
</template>

Does Aurelia support transclusion?

I'm familiar with the concept of ngTransclude via AngularJS and this.props.children via ReactJs, however does Aurelia support transclusion, that is, the notion of inserting, or transcluding, arbitrary content into another component?
Transclusion in AngularJS (https://plnkr.co/edit/i3STs2MjPrLhIDL5eANg)
HTML
<some-component>
Hello world
</some-component>
JS
app.directive('someComponent', function() {
return {
restrict: 'E',
transclude: true,
template: `<div style="border: 1px solid red">
<div ng-transclude>
</div>`
}
})
RESULT
Transclusion in ReactJs (https://plnkr.co/edit/wDHkvVJR3FL09xvnCeHE)
JS
const Main = (props) => (
<SomeComonent>
hello world
</SomeComonent>
);
const SomeComonent = ({children}) => (
<div style={{border: '1px solid red'}}>
{children}
</div>
);
RESULT

Several ways to do transclusion: Official docs
1. content slot <slot></slot>
The <slot> element serves as a placeholder in a component's template for arbitrary content. Example:
some-component.html
<template>
<div style="border: 1px solid red">
<slot></slot>
</div>
</template>
usage:
<template>
<require from="some-component"></require>
<some-component>
hello world
</some-component>
</template>
result:
2. named slots
A component can contain several replaceable parts. The user of the component can replace some or all of the parts. Parts that aren't replaced will display their default content.
blog-post.html
<template>
<h1>
<slot name="header">
Default Title
</slot>
</h1>
<article>
<slot name="content">
Default content
</slot>
</article>
<div class="footer">
<slot name="footer">
Default footer
</slot>
</div>
</template>
usage:
<template>
<require from="blog-post"></require>
<blog-post>
<template slot="header">
My custom header
</template>
<template slot="content">
My custom content lorem ipsum fla fla fla
</template>
<template slot="footer">
Copyright Megacorp
</template>
</blog-post>
</template>
3. template parts
The slots spec has limitations: http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-content-projection/5
Use template-parts for dynamically generated slots: https://github.com/aurelia/templating/issues/432

Yes, Aurelia supports the concept of transclusion through use of the <content /> component. Per the below, any content nested within <some-component> be it HTML, a String, or another component, will be rendered within this component.
app.js
export class App {}
app.html
<template>
<require from="some-component"></require>
<some-component>
hello world
</some-component>
</template>
some-component.js
export class SomeComponent {}
some-component.html
<template>
<div style="border: 1px solid red">
<content />
</div>
</template>
RESULT

UPDATE: USE SLOT INSTEAD OF CONTENT
// Actual component
<your-component>
Just some content
</your-component>
// Template of the component
<template>
<div class="some-styling">
<slot></slot> // <-- "Just some content" will be here!!
</div>
</template>