This is my welcome.blade.php
#extends('layouts.app')
#section('content')
<x-frontpage></x-frontpage>
#endsection
This is my frontpage.blade.php
<h1 class="text-center">{{ $product->name }}</h1>
This is my error
$product is not passed to welcome.blade.php
You should add a props to your x-frontpage blade component, otherwise it wouldn't be able to receive it.
Here's an example:
<!-- frontpage.blade.php -->
#props(['product'])
<h1 class="text-center">{{ $product->name }}</h1>
<!-- welcome.blade.php -->
#extends('layouts.app')
#section('content')
<x-frontpage :product="$product"></x-frontpage>
#endsection
Also make sure your welcome.blade.php has the $product variable.
Here are more resources:
https://laravel.com/docs/7.x/blade
https://laravel-livewire.com/docs/rendering-components#render-method
Related
I have a Django project contains multiple templates like this:
<body>
<div>
<ul>
<li>
<a href="#">
customers
</a>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>
<!-- place project specific Javascript in this file -->
<script src="{% static 'js/project.js' %}"></script>
<script>
{% include 'vue_dashboard.js' %}
</script>
</body>
the vue_dashboard.js file is the following
var app = new Vue({
el: '#vue_app',
delimiters: ["{(", ")}"],
data: function () {
return {
selected: 'group',
}
},
methods: {
change_selected: function (type) {
this.selected = type;
},
}
Now, I'm trying to use this vue method inside my <a> tag for example like this:
<a href="#" onclick="change_selected(type='customers')">
customers
</a>
then inside some other div obtain the value of the selected variable in the data section:
<div>
{{selected}}
</div>
I've also tried:
{% verbatim %}
{{ selected }}
{% endverbatim %}
and few other things, I know I'm using it wrong, but what's the right way to do so? I'm not even sure if my template can communicate with the vue file like this
Change
<a href="#" onclick="change_selected('customers')"> <!-- removed type= -->
customers
</a>
this should work with verbatim but you can also change delimiters in vue.js like following
delimiters: ["{(", ")}"],
which you did but didn't change {{ to {( so please change like this:
<div>
{( selected )} // <= change here
</div>
The first problem was like #ashwin said with the brackets, the other one was that the Vue app closing brackets were missing, also onclick doesn't work, I replaced it with #click, then everything was okay
I use the Zen theme for drupal 8.x.
I need to customize the menus so that they have the machine name or element ids that surrounds it.
This example is how I intend it to stay:
<nav role="navigation" aria-labelledby="block-uni-theme-2018-account-menu-menu" id="block-uni-theme-2018-account-menu" class="contextual-region c-navigation-account c-navigation">
<h2 class="visually-hidden" id="block-uni-theme-2018-account-menu-menu">User account menu</h2>
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'menu__account' -->
<!-- FILE NAME SUGGESTIONS:
* menu--account.html.twig
x menu.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/uni_theme_2018/templates/navigation/menu.html.twig' -->
<ul class="c-menu-account c-menu c-navigation-account__menu">...</ul>
<!-- END OUTPUT from 'themes/custom/uni_theme_2018/templates/navigation/menu.html.twig' -->
</nav>
Files I'm using: https://gist.github.com/onaSousa/488ab9349f15bd039c66bc663d43ba04
I do not know how to use the "account" in my menu file.
In the "menu.html.twig" template the default variable (menu_name) can not be used directly inside the function {% macro %} so we must set the variables together with the parameters to be accessible.
Before:
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
After:
{{ menus.menu_links(menu_name, items, attributes, 0) }}
{% macro menu_links(menu_name, items, attributes, menu_level) %}
https://gist.github.com/onaSousa/68ec7fbdc85c30d613d70053dd3e4a2b
<ul class="c-menu-account c-menu--no-levels c-menu">
<li class="c-menu-account__item">
Minha conta
</li>
<li class="c-menu-account__item">
Sair
</li>
</ul>
I created different tabs in a view with the following code:
<!doctype html>
<html>
<head>
<meta name="layout" content="main-redesign" />
<title>Account Settings</title>
</head>
<body>
<%-- global header --%>
<%-- tab navigation your network --%>
<g:render template="accountSettingNavigation"/>
<%-- main content area --%>
<div class="container account-setting">
<div class="row">
<div class="col-md-10 col-md-offset-2">
<h3 class="page-title">ACCOUNT SETTINGS</h3>
<%-- your network tab containers --%>
<div class="tab-content mb-100">
<div class="tab-pane active" id="personalInformation">
<g:render template="personalInfo"
model="[user:user,editable:editable]" />
</div>
<div class="tab-pane" id="changePassword">
<g:render template="changePassword"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In the changePassword template I have a form which includes 3 fields:
Current password
New password confirmation
After the user clicks on the "update password" the form is submitted to a controller to save the new password.
In have to render the view and to ensure that the changePassword template will be selected- How?
Provide in your model, what tab is active and by that means decide, where to put the active css class.
first add hidden fields into the templates, which mark the tab
(let say name="tabName" value"personalInformation")
in the controller you can access this field in
params (params.tabName)
at the end of the controller put this
field into the model
use this field in the gsp to decide what tab
is active
I have a small problem with play-framwork (1.2.4).
I want to have a tag inherit another tag, and this one be included in a html page extending another web page. The best way to explain is with a schema :
However, it did not work the way I want. In fact, the extends in the test.tag file seems to overwrite the one in Screen.html. Then, the content of all the Screen.html is included in the block.tag #{doLayout /} instead of in the one of main.html
Is there any way to do what I want ?
Thanks.
Here is the sources :
main.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<body>
#{doLayout /}
</body>
</html>
Screen.html
#{extends 'main.html' /}
<div id="Screen.html">
#{test /}
</div>
test.tag
#{extends 'tags/block.tag' /}
test.tag
block.tag
<div id="test">
#{doLayout /}
</div>
The generated html when the page is called
<div id="test">
<div id="Screen.html">
test.tag
</div>
</div>
As you can see, the main.html is not included and the the Screen is included in the block. Any ideas ?
For information, the wanted output :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<body>
<div id="Screen.html">
<div id="test">
test.tag
</div>
</div>
</body>
</html>
You can try using #{extends /} in your templates but not use them in tags.
To have some more flexibility in building tags on top of another, you could do:
test.tag:
#{block }
test.tag
#{/block}
and block.tag:
<div id="test">
#{doBody /}
</div>
with this you are passing part of the body from a test.tag to a block.tag and inserting it somewhere in block.tag using #{doBody /}
I think this might due to Groovy engine does #{extends} evaluation on runtime, the screen.html call test.tag which in turn extends block.tag, which happens after screen's extends to main.html and at runtime, groovy decide the final extends win.
Probably you want to try the rythm plugin which evaluate extends semantic at parsing time. That says rythm has no issue in your case.
I'm trying to get information of a users avatar based in an extended profile model. I usually call the information via get_profile(). However on this occasion the call is within a for loop in the template and I get errors if one of the users are the same.
How would I go about avoiding this error?
{% for fevent in fevents %}
<!-- EVENT ><! -->
<div class="event">
<div class="pic">
{{ fevent.getPublishedPredictionsCount }}
<img src="{% thumbnail fevent.artwork.get_absolute_url 100x98 crop,upscale %}" alt="" width="100" height="98" />
<div class="overlay">
</div>
</div>
<h1>{{ fevent.title|trunchar:30 }}</h1>
{% autoescape off %}
{{ fevent.getEventPredictionScore|makestars }}
{% endautoescape %}
<ul class="details">
<li class="cat">
Category: {{ fevent.catagory }}
</li>
<li class="location">
{{ fevent.location }}
</li>
<li class="date">
{{ fevent.date_and_time }}
</li>
<li class="time">
7:00pm - 8:00pm
</li>
</ul>
<!-- CLEAR ><! --><div class="clear"></div>
<div class="hype">
<div class="avatar">
<img src="{% thumbnail fevent.owner.get_profile.avatar.get_absolute_url 120x120 crop,upscale %}" alt="" width="120" height="120" />
</div>
<p>{{ fevent.description|trunchar:200 }}… Read More</p>
</div>
<!-- CLEAR ><! --><div class="clear"></div>
</div>
<!-- END OF EVENT ><! -->
{% endfor %}
The problem is here:
{% thumbnail fevent.owner.get_profile.avatar.get_absolute_url 120x120 crop,upscale %}
Error Message returned:
Caught MultipleObjectsReturned while rendering: get() returned more than one UserProfile -- it returned 2! Lookup parameters were {'user__id__exact': 4L}
To expand on what Matt said, while using get_or_create is a good idea, you should definitely define your profile model's User link with a OneToOneField, instead of a ForeignKey.
user = models.OneToOneField(User, verbose_name=_(u'user'))
Now, if you forget to use get_or_create(), or somehow accidentally try to create a duplicate profile for the same user, the database will raise an IntegrityError.
That error means there are two UserProfile objects in the database matching the query used by get_profile, not that get_profile was called twice. You need to remove one of those profile objects from the database and make sure there aren't multiples created again. You should be able to use the get_profile method multiple times without issue. Maybe you have a get_or_create call in that function without checking the proper values.