I was trying to access a vue array inside a quote like this
<div v-for="category in categories">
Links
</div>
its doesnt seem to work. Then i tried taking the code out of the quote{{category.link}} this works fine . Is there any other way to do this?
Thanks
You must bind your attributes when they are from Vue variables.
<div v-for="category in categories">
<a :href="category.link">Link</a>
</div>
You can not pass an array of links as a value of the href attribute. You can pass one link at the same time, instead.
On the other hand, if we suppose category.link refers to one link only, then you can write this:
Link
Related
I am developing a food website using Spring boot, Thymleaf and Bootstrap. I need to display menu items in a webpage. To display it I am fetching the data from a database and then iterating over it to display. However, I am not able to display it in a single column like this. Any suggestions on how to handle this?
Code:
${menu.mainMenuName}"
You need to move your "th:each" statement to the div tag. It will be something like:
<div th:each="menu: ${mainMenu}" class="col-md-12">
<a class="text-info" th:value="${menu.id}" th:text="${menu.mainMenuName}" href=""></a>
</div>
Note that ${menu.mainMenuName}" is redundant with th:text="${menu.mainMenuName}
I found the solution for it. Problem with my previous approach was it was creating col-md-2 for every link hence it was getting displayed in single line to fix it below approach was followed:
<div class="col-md-2">
<div class="main-menu" th:each="menu: ${mainMenu}">
<a class="text-info" th:value="${menu.id}" th:text="${menu.mainMenuName}" href=""></a>
</div>
</div>
I have a list of items which I want to render in the following way:
#foreach($campaignList as $campaign)
<div class="col-md-{{12/$columns}}">
#include('admin.includes.campaign_card',['campaign'=>$campaign,'link'=>true])
</div>
#endforeach
The admin.includes.campaign_card template (with debug)
#extends('admin.includes.base_campaign_card')
{{$campaign}} // Here the data is okay
#section('options')
{{$campaign}} //Here however I get the first item on each loop
#endsection
Basically the campaign object within the section remains the same when looping.
It seems that the issue is related to the fact that you can have just one section with a given name at a time.
There is way to force blade to rerender with #overwrite directive (which is not in the docs apparently) instead of #endsection.
Github comment
I'm trying to get the current survey id to show within my QR code, however it's only displaying
$survey->id
I'm sure there is something simple I'm missing (first laravel project). Any help would be appreciated.
Reference simple software QR
View
<img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(200)->generate('localhost:8000/survey/view/$survey->id')) !!} ">
Currently you are echoing $survey->id as a string, you want to use the value of said variable.
To do this you will need to remove it from the string and instead place it as the variable inside your url.
<img src="data:image/png;base64, {!! base64_encode(QrCode::format('png')->size(200)->generate('localhost:8000/survey/view/'.$survey->id)) !!} ">
Furthermore you might want to change the way your generate your link and instead use route names or the actions instead of the hardcoded local host, this might give trouble when deploying your application.
I am looking for a very general way to include bootstrap components in my blade view. For example let's say I need a drop down in my view, should I make a partial called dropdown.blade.php with code as follows:
<div class="dropdown">
<a href="#" class="dropdown-toggle" type="button" data-toggle="dropdown">
<span class="glyphicon glyphicon-chevron-down"></span></a>
<ul class="dropdown-menu">
#foreach ($options as $option)
<li>{{$option["name"]}}</li>
#endforeach
</ul>
</div>
and use it in my view in the following way:
#include('partials.dropdown',
array("options"=>array(
["href"=>"#", "name"=>"Profile"],
["href"=>"#", "name"=>"Report"],
)))
Even we can make it more generic by adding options for button name etc. Is it a good or preferable way to do it or should we use copy-paste method from bootstrap website to our views every time? Is there any package that is doing this sort of work? Can we make it in more elegant way?
This seems like a good idea if you are going to re-use the component a lot. I think the more elegant way to do it would be to create custom blade directives:
https://laravel.com/docs/master/blade#extending-blade
Then you could do, for instance:
#dropdown($options, 'btn-primary')
I would also provide an argument for a custom element ID or name, so you can reference it elsewhere on the page as needed.
This gets a little more complex with things like modals. I think you'd want to register multiple blade directives so you could do something like
#startmodal
#modaltitle('Title')
#startmodalbody
Some body content
#endmodalbody
#endmodal
I m beginer in AngularJS, and i try to do this :
<form ng-repeat="prop in tab">
<input ng-model="prop" type="text">
</form>
{{tab}}
With this code inputs values is ok, but when i edit value the reverse binding to "tab" don't work.
How i can simply do this ?
Thanks for yours tips ;)
If you want to see changes in your html document live you either need to move the expression inside the form tag and change it to {{tab.prop}} or outside the tag but also showing the property you are interested in displaying such as {{tab.somePropertyName}}.