How to use Laravel blade syntax in Vuejs - javascript

How to implement this syntax of Laravel below inside a Vue.js component?
#if(!Auth::guest())
#if(Auth::user()->id === $post->user->id)
<a href=#>edit</a>
#endif
#endif

This works now
<example-component :user="{{json_encode(Auth::user())}}"></example-component>
Exemple.vue
<template>
<p>{{ user.name }}</p>
</template>export default {props : ['user']}

Related

Vue.js - pass template to grandchild

I have a component that defines a set of slots dynamically from props like this:
<template v-for="(field, index) in fields">
<div
v-if="!field.hide"
:key="index"
class="my-class"
>
<slot :name="getSlotName(field.name, 'label')" />
</div>
</template>
And I have a component WrapperComponent that uses template to fill those slots:
<slotted-component :fields="[{name: 'f1'}]">
<template #f1>
Some content here
</template>
</slotted-component>
And I want to be able to override the content of <template #f1> from the parent component of the WrapperComponent like
<WrapperComponent>
<template #f1>
Some other content
</template>
</WrapperComponent>
I tried to use a PassThroughTemplate component with this template:
<template>
<template v-slot:[name]>
<slot
:name="name"
v-bind="$attrs"
/>
</template>
</template>
but it gives me a compilation error if not compiling at runtime (only eslint yells in this case). I want to use render function, but this code doesn't render anything:
render (h, ctx) {
return h(
'template',
{slot: ctx.props.name},
h('slot', {name: ctx.props.name})
)
}
and i don't know how to use it properly. So, is there a way to do that or another way to achieve template replacement?

Passing context to tooltip of ngx bootstrap

I'm working with tooltip in ngx-bootstrap, and want to pass data to the ng-template being to the tooltip. The documentation provides [tooltipContext], but it didn't seem to be working. I have provided a code snippet.
HTML:
<ng-template #tooltipTmpl let-view="view">
<div class="tooltip-section">
<div class="section-title">
{{ view.dateRangeText }}
</div>
<div class="section-text">
{{ view.data }}
</div>
</div>
</ng-template>
<div
*ngIf="view.isVisible"
[tooltip]="tooltipTmpl"
[tooltipContext]="{view: view}"
containerClass="white-tool-tip"
placement="top"
>
<div class="sub-title">
{{ view.title }}
</div>
</div>
REF: https://valor-software.com/ngx-bootstrap/#/tooltip
I have used bootstrap popover in my projects, so would recommend using popover.
Also, there was an issue created on GitHub but the user ended up using popover -
https://github.com/valor-software/ngx-bootstrap/issues/4775
#Yiu Pang Chan - you can have views array with following approach.
In app.component.html file
<div *ngFor="let view of views; let i = index">
<button type="button" class="btn btn-success"
*ngIf="view.isVisible"
[tooltip]="tooltipTmpl" on-mouseover="setTooltipData(view)" >
Show me tooltip with html {{ view.title }}
</button>
</div>
<ng-template #tooltipTmpl>
<h4>
{{ viewDateRangeText }}
</h4>
<div>
<i>
{{ viewData }}
</i>
</div>
</ng-template>
In app.component.ts file
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public viewDateRangeText: string;
public viewData: any;
setTooltipData(view: any){
viewDateRangeText = view.dateRangeText;
viewData = view.data;
}
}
I have face the same problem , so far I have check the source code the tooltipContext mark as deprecated you can do a work a round thi like this
you can still access to the view property inside the ng-template
<button type="button" class="btn btn-success"
*ngIf="view.isVisible"
[tooltip]="tooltipTmpl">
Show me tooltip with html {{ view.title }}
</button>
<ng-template #tooltipTmpl>
<h4>
{{ view.dateRangeText }}
</h4>
<div>
<i>
{{ view.data }}
</i>
</div>
</ng-template>
demo 🔥🔥
Updated 🚀🚀
incase you want to use my solation with array of views , you juest need to move ng-template to the body of the ngFor.
template
<ng-container *ngFor=" let view of views">
<button type="button" class="btn btn-success"
*ngIf="view.isVisible"
[tooltip]="tooltipTmpl">
Show me tooltip with html {{ view.title }}
</button>
<ng-template #tooltipTmpl>
<h4>
{{ view.dateRangeText }}
</h4>
<div>
<i>
{{ view.data }}
</i>
</div>
</ng-template>
<br>
<br>
</ng-container>
demo 🚀🚀
#rkp9 Thanks for the codes. It does solve the issue, but it added viewDateRangeText, viewData, and setTooltipData in the TS codes.
I went with the approach #MuhammedAlbarmavi suggested, since it is without extra variables and functions. The comment on Github didn't have the configuration that we need for popover to act like a tooltip. I have it in the following.
<ng-template #tooltipTmpl let-view="view">
<div class="tooltip-section">
<div class="section-title">
{{ view.dateRangeText }}
</div>
<div class="section-text">
{{ view.data }}
</div>
</div>
</ng-template>
<div
[popoverContext]="{ view: view }"
[popover]="tooltipTmpl"
triggers="mouseenter:mouseleave"
placement="top"
>
<div class="sub-title">
{{ view.title }}
</div>
</div>

Same slot content for multiple template slots

In vuejs, is there a way to set the same content for multiple slots without copy pasting?
So this:
<base-layout>
<template slot="option">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
<template slot="singleLabel">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
</base-layout>
Could be written that way:
<base-layout>
<template slot="['option', 'singleLabel']">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
</base-layout>
Thanks a lot.
You could try using v-for for that.
<base-layout>
<template :slot="slotName" v-for="slotName in ['option', 'singleLabel']">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
</base-layout>
See working example.

django-templatetag-handlebars - declare repeated template code once

I am using django 1.7 & python 2.7. It is all still quite new to me so I am still learning.
I am also using django-templatetag-handlebars in my templates.
I have a dynamic template that uses the same template code several times in the same template.
How do I declare the repeated code once and then reference it where I need it? Handlebars.js uses partials, but I am not so sure how I can use partials in the django-templatetag-handlebars.
Here is my template code:
{% load templatetag_handlebars %}
{% tplhandlebars "address_details_live_preview_template_ltr" %}
....
{{# if address_style_01 }}
{{! Address Style: 1 }}
{{# if address_line_1 }}
{{ address_line_1 }}<span class="spacer"></span>
{{/if}}
{{# if address_street_details }}
{{ address_street_details }}<span class="spacer"></span>
{{/if}}
{{# if address_locality }}
{{ address_locality }}<span class="spacer"></span>
{{/if}}
{{# if address_country_name }}
{{ address_country_name }}
{{/if}}
{{else}}
....

Angular ng-repeat inside directive view

I'm trying to do a ng-repeat inside the view returned by a directive.
Here is my template defined in templateUrl
<div class="outside">
<div class"inside" ng-repeat="copas as cup">
{{ cup.nombre }}
cupcakes.nombre
{{ cup }}
cupcakes
</div>
{{ copas[0].nombre }}
{{ copas }}
</div>
The content inside "inside" class is empty, while the content at the bottom of outside class is correct.
What am I missing?
thank you
It should be cup in copas for your ngRepeat expression:
<div class="outside">
<div class"inside" ng-repeat="cup in copas">
{{ cup.nombre }}
cupcakes.nombre
{{ cup }}
cupcakes
</div>
{{ copas[0].nombre }}
{{ copas }}
</div>

Categories

Resources