When nesting repeat.for in Aurelia, an internal repeat.for does not have access to the variable used in it's parent repeat.for.
Example
<div repeat.for="x of 8">
<div repeat.for="y of 8">
${x} - ${y}
</div>
</div>
In the above example, ${x} does not emit anything. How do you get the x value when inside the internal repeat.for?
Found my answer. You need to do the following:
<div repeat.for="x of 8">
<div repeat.for="y of 8">
${$parent.x} - ${y}
</div>
</div>
Related
I've done the research but can't find a good answer. My parent and child component code is below. How do I pass the index for the v-for loop in the parent to the child component for use there? I want to hide any of the gauges past #4 for mobile screens, but show all of them on a desktop.
Parent:
<div class="col-md-8 col-xs-6">
<div class="row flex-nowrap">
<data-block
v-for="(gauge, index) in device.gauges"
:metric="gauge.metric"
:value="gauge.value"
:unit="gauge.unit"
:alarm="gauge.alarm"
:idx="index">
</data-block>
</div>
</div>
Child:
app.component('data-block', {
props: ['alarm', 'metric','value','unit','idx'],
template: `<div v-bind:class="'col card px-0 text-center border' + ((alarm) ? ' border-danger':' border-success') + ((idx > 3) ? ' d-none d-md-block':'')">\
<div class="card-header p-1">{{metric}}</div>\
<div class="card-body p-1 align-middle">\
<h1 class=" text-center display-1 font-weight-normal text-nowrap">{{value}}</h1>\
</div>\
<div class="card-footer p-1">{{unit}}</div>\
</div>`,
created: ()=> console.log(this.idx) //yields "undefined"
})
You're passing the idx prop correctly, but Instead of checking its value inside created hook, try displaying it in the template instead, to make sure it's not an issue with timing (it might not be defined when the child component is created):
<div>{{idx}}</div>
Also, to make the code easier to read and write, I would suggest you to move the static classes to class attribute and the dynamic classes to v-bind:class attribute, and also make it multiline:
template: `
<div
class="col card px-0 text-center border"
:class="{
'd-none d-md-block': idx > 3,
'border-danger': alarm,
'border-success': !alarm
}"
>
...
`
How can I update the accordion-item title using a v-for loop inside F7+Vue ? I need each accordian-item title to be set to the Title of each object inside the myList array that is being looped over using the v-for.
Here is example below:
<f7-list-item v-for="value in myList" accordion-item title="{{value.Title}}">
<f7-accordion-content>
<f7-block>
<p>{{value.foo}}</p>
<p>{{value.boo}}</p>
</f7-block>
</f7-accordion-content>
</f7-list-item>
</f7-list>
Due to the time required for me to wrap my head around how I would use the current F7+Vue Accordion with a v-for to inject the title element... it seems that this is not possible. I could be wrong. I ended up resolving this by using the standard non f7+vue components...
example:
<div class="list accordion-list">
<ul>
<li class="accordion-item" v-for="value in myList">
<a href="#" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">{{value.Title}}</div>
</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>{{value.foo}}</p>
<p>{{value.boo}}</p>
</div>
</div>
</li>
</ul>
</div>
I have below few classes that has to applied to a div in *ngFor as shown below:
<div class="row">
<ng-container *ngFor="let item of tripTiles">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
...
</div>
</div>
<ng-container>
</div>
I have classes like panel panel-primary, panel panel-green, panel panel-red and panel panel-yellow how can i dynamically assign these classes.
Can i get any help or idea?..
Try to use [ngClass] in div with conditions or variables, like in this answer:
Dynamic classname inside ngClass in angular 2
Example:
<div [ngClass]="[type === 'primary' ? 'panel-primary' : '']">
...
</div>
I have a vue component with a structure like this:
<transition name="fade">
<div>
<div v-if="false">
</div>
<div v-else="">
<div>
<div>
<div>no matter what content</div>
</div>
<div>
</div>
</div>
</transition>
it works fine until i add a 4th div inside, even without content as it will throw:
DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
If I remove the transition tag... it no longer throws the error
so I'm just curious... is there a limit in allowed depth for vue?
No. There's no limit. You can nest any number divs. But I saw your v-else condition and that might be the issue.
Replace this:
<div v-else="">
With this:
<div v-else>
I'd like to create a custom element that loops through an array and applies the to each item in the array. For example, the view template of the custom element would contain something like:
<div repeat.for="i of items">
<div with.bind="i">
<slot></slot>
</div>
</div>
When I remove the repeat.for and with.bind attributes, the slot displays a single time. Is there a way to make it repeat for each item in the list?
No, you cannot use slots with repeat.for or bind today. To do this you have to use replaceable parts. For example:
<div repeat.for="i of items">
<div with.bind="i">
<template replaceable part="content"></template>
</div>
</div>
Usage:
<my-component>
<template replace-part="content">Some Content - ${somePropertyOfI}</template>
</my-component>
Runnable example: https://gist.run/?id=29aa1c1199f080c9ba0e72845044799b