I have an array with a bunch of data that I need to bind to different parts of a custom element that I created. Here's the relevant bit of that element:
<div class="soundcard-container" vertical layout>
<content select="img"></content>
<paper-ripple fit></paper-ripple>
<div class="soundcard-bottom-container" horizontal layout center justified>
<content class="soundcard-string" select="span"></content>
<a class="soundcard-download-icon" href="#"></a>
</div>
</div>
And in my index.html file I attempt to repeat it like so:
<div class="card-container" layout horizontal wrap>
<template repeat="{{s in carddata}}">
<sound-card>
<img src="{{s.imgurl}}">
<span>{{s.quote}}</span>
</sound-card>
</template>
My array is rather large, but here's the condensed version (its in my index.html file):
<script>
Polymer({
ready: function() {
this.carddata = [
{imgurl: '../www/img/soundcard-imgs/img1.jpg', quote: 'String one', sound: '../www/card-sounds/sound1.m4a'},
{imgurl: '../www/img/soundcard-imgs/img2.jpg', quote: 'String two', sound: '../www/card-sounds/sound2.m4a'}
];
}
});
</script>
Am I getting something fundamentally wrong? I thought that {{s in carddata}} would repeat the <sound-card> custom element for however many items were in the carddata array? I used the beginner example on the Polymer site but when I run it on my http server the template is never moving away from display: none. Any ideas? Or examples, or anything! Thanks!
That only works in a Polymer element. So you need to create a Polymer element (e.g. sound-card-collection) and move the code from index.html to that element:
elements/sound-card-collection.html
<polymer-element name="sound-card-collection">
<template>
<div class="card-container" layout horizontal wrap>
<template repeat="{{s in carddata}}">
<sound-card>
<img src="{{s.imgurl}}">
<span>{{s.quote}}</span>
</sound-card>
</template>
</template>
<script>
Polymer({
ready: function() {
this.carddata = [
{imgurl: '../www/img/soundcard-imgs/img1.jpg', quote: 'String one', sound: '../www/card-sounds/sound1.m4a'},
{imgurl: '../www/img/soundcard-imgs/img2.jpg', quote: 'String two', sound: '../www/card-sounds/sound2.m4a'}
];
}
});
</script>
</polmer-element>
index.html:
In the head:
<link rel="import" href="elements/sound-card-collection.html">
Somewhere in the body:
<sound-card-collection></sound-card-collection>
Related
I have a GET request in my home.vue component.
This query allows me to get an array of objects.
To display all the objects, I do a v-for loop and everything works fine.
<div class="commentaires" v-for="(com, index) of coms" :key="index">
My concern is that I want to display an image by clicking on it (coms[index].imageUrl), in a modal (popup).
The modal is displayed fine but not with the correct image, i.e. the modal displays the last image obtained in the loop, which is not correct.
Here is the full code of my home.vue component
<template>
<div class="container">
<div class="commentaires" v-for="(com, index) of coms" :key="index">
<modale :imageUrl="com.imageUrl_$this.index" :revele="revele" :toggleModale="toggleModale"></modale>
<img class="photo" :src=""" alt="image du commentaire" #click="toggleModale">
</div>
</div>
</template>
<script>
//import axios from "axios";
import axios from "axios";
import Modale from "./Modale";
export default {
name: 'HoMe',
data() {
return {
coms: [],
revele: false
}
},
components: {
modale: Modale
},
methods: {
toggleModale: function () {
this.revele = !this.revele;
},
</script>
Here is my modale.vue component
<template>
<div class="bloc-modale" v-if="revele">
<div class="overlay" #click="toggleModale"></div>
<div class="modale card">
<div v-on:click="toggleModale" class="btn-modale btn btn-danger">X</div>
<img :src=""" alt="image du commentaire" id="modal">
</div>
</div>
</template>
<script>
export default {
name: "Modale",
props: ["revele", "toggleModale", "imageUrl"],
};
</script>
I've been working on it for 1 week but I can't, so thank you very much for your help...
in your v-for loop you're binding the same revele and toggleModale to every modal. When there is only one revele then any time it's true, all modals will be displayed. It's therefore likely you're actually opening all modals and simply seeing the last one in the stack. You should modify coms so that each item has it's own revele, e.g.:
coms = [
{
imageUrl: 'asdf',
revele: false
},
{
imageUrl: 'zxcv',
revele: false
},
{
imageUrl: 'ghjk',
revele: false
}
];
then inside your v-for:
<modale
:image-url="com.imageUrl"
:revele="com.revele"
#toggle-modale="com.revele = false"
></modale>
<img class="photo" :src=""" alt="image du commentaire" #click="com.revele = true">
passing the same function as a prop to each modal to control the value of revele is also a bad idea. Anytime a prop value needs to be modified in a child component, the child should emit an event telling the parent to modify the value. Notice in my code snippet above I replaced the prop with an event handler that turns the revele value specific to that modal to false. Inside each modal you should fire that event:
modale.vue
<div class="btn-modale btn btn-danger" #click="$emit('toggle-modale')">
X
</div>
This way you don't need any function at all to control the display of the modals.
Using Vue 2 on Laravel 5.3
I would like to add a loading icon which covers the whole page for 3 seconds allowing all rendering happened, then showing the content after 3 seconds. However, without or with adding the div v-show="!loading" as shown below, the content actually flashed for around half second before it gone disappeared, then after 3 seconds it appears again. So I think there is an unexpected flash at the start when the page is loaded. I read a bit about v-cloak online but it seems only solve short flash of {{}} ?
<template>
<div>
<transition name="fade">
<div v-if="loading" class="loading">Loading…</div>
</transition>
<div v-show="!loading">
<slot>
<!-- Main Content -->
</slot>
</div>
</div>
</template>
<script>
export default {
data(){
return{
loading:true
}
},
props:[
],
mounted(){
var vm = this
vm.loaded()
LoadingEvent.$on('loading', function(loading){
vm.loading = loading
})
},
updated(){
},
methods:{
loaded(){
setTimeout(function(){
LoadingEvent.$emit('loading',false);
}, 1000);
},
}
}
</script>
Try putting both v-if and v-else inside transition like following:
<template>
<div>
<transition name="fade">
<div v-if="loading" class="loading">Loading…</div>
<div v-else>
<slot>
<!-- Main Content -->
</slot>
</div>
</transition>
</div>
</template>
The site I'm currently working on is built in Drupal 7. I have one form that requires user input so I'm attempting to build it with VueJS. The form is contained all within one template file (.tpl.php) and all the content is provided in this template file or via the VueJS Javascript (nothing is coming from the CMS).
The issue I have is that the Vue components are not rendering on the front-end, but when I copy the code into a JSFiddle they do, so I'm guessing it is an issue with the interaction between VueJS and Drupal. Here is a screenshot of my markup when inspecting...
Here is the code from the .tpl.php file...
<div id="app">
<form>
<div>
<label for="year">Per Year</label>
<input type="radio" name="frequency" id="year" value="year" v-model="frequency" checked>
<label for="month">Per Month</label>
<input type="radio" name="frequency" id="month" value="month" v-model="frequency">
</div>
</form>
<ul class="plans">
<template id="plan-component">
<h2 class="plan-name">{{ name }}</h2>
<h2 class="plan-cost">{{ price }}</h2>
<h2 class="plan-tagline">{{ tagline }}</h2>
Choose this plan
</template>
<li>
<plan-component :frequency="frequency"
name="Basic"
tagline="Basic tagline"
price-yearly="Free"
price-monthly="Free"
></plan-component>
</li>
<li>
<plan-component :frequency="frequency"
name="Rec"
tagline="Rec tagline"
price-yearly="3"
price-monthly="4"
></plan-component>
</li>
<li>
<plan-component :frequency="frequency"
name="Team"
tagline="Team tagline"
price-yearly="4"
price-monthly="5"
></plan-component>
</li>
<li>
<plan-component :frequency="frequency"
name="Club"
tagline="Club tagline"
price-yearly="5"
price-monthly="6"
></plan-component>
</li>
</ul>
</div>
..and the code from my JS file...
Vue.component('plan-component', {
template: '#plan-component',
props: ['frequency', 'name', 'tagline', 'priceYearly', 'priceMonthly'],
computed: {
'price': function() {
if (this.frequency === 'year') {
return this.priceYearly;
} else {
return this.priceMonthly;
}
}
},
methods: {
makeActivePlan() {
// We dispatch an event setting this to become the active plan
this.$dispatch('set-active-plan', this);
}
}
});
new Vue({
el: '#app',
data: {
frequency: 'year',
activePlan: {name: 'no', price: 'You must select a plan!' }
},
events: {
'set-active-plan': function(plan) {
this.activePlan = plan;
}
},
});
And here is the JSFiddle which outputs the components correctly - https://jsfiddle.net/2xgrpLm6/
What browser are you using? <template> tags are not supported in IE.
Another idea is to make sure you are never using fragment components (meaning wrap everything inside your template with a div like so:
<template id="foobar">
<div>
CONTENT HERE
</div>
</template>
Lastly, have you turned on Vue debug mode? Before you instantiate your Vue instance, set Vue.config.debug = true and see if you get console errors then.
Try moving the <template id="plan-component">...</template> code outside of the Vue instance. I.e., such that it is not contained within <div id="app">...</div>.
This has solved a similar problem for me in the past, though I'm not sure if it applies here.
For anyone having a similar issue, the solution was simple. After Jeff suggested turning on Vue debug mode (and downloading the Dev version of Vue JS instead of minified - https://vuejs.org/guide/installation.html) the console gave the error [Vue warn]: Cannot find element: #app.
The issue was that Drupal was loading my scripts in the <head>, before <div id="app"> was loaded in the DOM. As such #app couldn't be found. After outputting the scripts before the closing <body> tag all was sorted. See here for more information [Vue warn]: Cannot find element
Suppose I have two distinct polymer-elements
One should be embedded inside the other using the content placeholder.
Is it possible to do data-binding between these two nested polymer-elements ?
I tried, but I can't get it to work: http://jsbin.com/IVodePuS/11/
According to http://www.polymer-project.org/articles/communication.html#binding data-binding between polymer-elements should work (in those examples they were done inside the template tag without using a content placeholder).
Update:
Scott Miles clarified that data-binding only works on the template level.
However in my case I don't know the exact template beforehand but I want to allow the user of my parent-element to specify which child-element it should contain (provided that there are different child-elements.
I think this question is related to this one: Using template defined in light dom inside a Polymer element
I updated the example below to highlight his:
<polymer-element name="parent-element" >
<template >
<div>Parent data: {{data1}} </div>
<content />
</template>
<script>
Polymer('parent-element', {
data1 : '',
ready: function() {
this.data='parent content';
}
});
</script>
</polymer-element>
<polymer-element name="child-element" attributes="data2">
<template>
<div>Parent data: {{data2}} </div>
</template>
<script>
Polymer('child-element', {
data2 : '',
ready: function() {
}
});
</script>
</polymer-element>
<polymer-element name="child2-element" attributes="data2">
<template>
<div>Parent data: {{data2}} </div>
</template>
<script>
Polymer('child2-element', {
data2 : '',
ready: function() {
}
});
</script>
</polymer-element>
The user can choose which child-element to embed:
<parent-element data1 = "test">
<child-element data2="{{data1}}"/>
</parent-element>
<parent-element data1 ="test" >
<child2-element data2="{{data1}}"/>
</parent-element>
Workaround:
The only workaround I found was to add change watcher and use getDistributedNodes() to get the child element and manually set data2 to data:
<polymer-element name="parent-element" >
<template >
<div>Parent data: {{data}} </div>
<content id="content"/>
</template>
<script>
Polymer('parent-element', {
data : '',
ready: function() {
this.data='parent content';
},
dataChanged : function() {
contents = this.$.content.getDistributedNodes();
if (contents.length > 0) {
contents[0].data2 = this.data;
}
},
});
</script>
</polymer-element>
Polymer data-binding works by attaching a model to a whole subtree.
You wrote:
<parent-element>
<child-element data2="{{data}}"/>
</parent-element>
this implies a rule that the parentNode provides the binding model. But now imagine you wanted to write:
<parent-element>
<div>
<child-element data2="{{data}}"></child-element>
</div>
</parent-element>
Now you have a problem.
Instead, in Polymer examples, you will notice that the {{}} are (almost always) inside of a template. For example, if I define:
<polymer-element name="host-element" attributes="data" noscript>
<template>
<parent-element data1="{{data}}">
<child-element data2="{{data}}"></child-element>
</parent-element>
</template>
</polymer-element>
Now, I have a model context (host-element) that I can use to bind things together in the entire subtree described by the template.
Note that I don't need attributes="data" for this to work. I added that so host-element exposes data and I can do this:
<host-element data="test"></host-element>
http://jsbin.com/IVodePuS/15/edit
Works like a charm. Parent element is publishing property data, that can by 2 way data bound. This way the child element gets the same data.
<polymer-element name="custom-element">
<template>
<parent data="{{data}}">
<child data="{{data}}"></child>
</parent>
</template>
<script>
Polymer({
ready: function() {
},
data: {}
});
</script>
I think in Polymer >= 1.0 this should be done using "Auto-binding template".
Thanks again for this awesome router. I'm having an issue with yield not yielding where it should. Like most errors, this one is probably caused somewhere between the chair and the keyboard so I'd appreciate your help!
My Template html is quite simple.
<body>
{{> layout}}
</body>
<template name='layout>
<!--wrapper tags -->
{{> nav}}
<!--more wrapper tags -->
{{yield}}
<!--close wrapper tags -->
{{> footer}}
<!--close wrapper tags -->
</template>
When this renders, I see (in order):
NAV > FOOTER > NAV > YIELD > FOOTER
I tried putting all the wrappers and {{>nav}} and {{>footer}} into the main body tag, leaving only {{yield}} in the layout template. When I do that, I get NAV > FOOTER > YIELD.
In both cases, my router js is identical:
if (Meteor.isClient) {
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function () {
this.route('home', {
path: '/',
template: 'home',
after: function () {
addLabel(this.path);
}
})
//more routes
});
}
I'm sure it's something silly I've done but would appreciate any help you might offer.
Thanks in advance,
db
Remove the {{> layout}} from body tag.
<body>
<!-- no template here, router will add layout automatically -->
</body>
<template name='layout'>
<!--wrapper tags -->
{{> nav}}
<!--more wrapper tags -->
{{yield}}
<!--close wrapper tags -->
{{> footer}}
<!--close wrapper tags -->
</template>
And you are missing ' in < template name='layout>...