I have used Django to develop a webapp
In the admin model, I used Django simple UI package, I want to choose the last 2rd one in the list(models)
How could I slice in the below?
<div v-for="(c,j) in models" :key="c.name" class="quick-wrap">
<a href="javascript:;" #click="openTab(c,(j+1)+'')">
<span class="icon" :class="c.icon"></span>
<span class="card-name" v-text="c.name"></span>
</a>
</div>
Not sure what last 2rd means, but if you want the last 2 items in what appears to be a context variable called models you can do that in the view you use to call this html file. Using a slice on your queryset you should be able to pass models[-2:] to get the last two and pass that instead of models. Vue may have a way to slice as well, but if you can do it in the view, it probably makes sense to do so.
Related
I'm new to Angular and I just put in place an i18n (2 languages) system for a website I am creating. Everything works properly but in order to switch from one language to another in my header, I feel stuck.
I followed the Angular documentation to transfer my variables from child to parent component and I ended with this:
<input type="text" id="item-input" #lang>
<button type="button" (click)="changeChosenLang(lang.value)">
{{ 'global.lang' | translate }}
</button>
As you can see, I write my language in the input form and I send it to the proper component with a button. What I wanted was to click on my 'global.lang' text and to be able to send its value to the parent component, since the value is the language which is not actually used.
I don't know how to put my 'global.lang' text in a variable, neither what kind of balise I can use. Also I didn't know how to summarize my problem to search for it on StackOverflow so if you know a similar post, don't hesitate to post the link.
Thank you for your reading!
I found a less tortured way (poor brain) to have the result I wanted:
<span (click)="changeChosenLang()">
{{ 'global.lang' | translate }}
</span>
First I temporary changed my button to a span balise and I deleted the parameter from my changeChosenLang() function. Then, I transferred a variable 'lang' from my parent component to this one, witch contains the value of the language chosen in my app constructor. At each click, I change its value in my changeChosenLang() function and everything works great!
I hope it can help someone someday. The moral of this post is: the simpler, the better! Have a good day.
In some instances, I need to just repeat some html code within my Template to DRY it up, but making a new component and passing a ton of props and dynamic data to it seems like overkill. Is there a way to define a repeatable block of template code that can just be reused?
A good example of this is my vuelidate validation error messages that are repeated. I don't want to create an entire vue component for them because then I need to pass in the validation, validation prop and a few other things so that seems like creating more complexity just to DRY up a little bit of the template.
I have this block of code on three different scenarious in the same template, is there a way I can just define them as a block to reuse. Literally nothing changes so it's very much against DRY principles.
<span
v-if="!$v.initialReplyText.required"
class="error">Your reply cannot be empty.</span>
<span
v-if="!$v.initialReplyText.maxLength"
class="error">Your reply cannot be over 2,000 characters.</span>
you can do dynamic binding using v-bind, that way you don't need to bind all properties individually.
<!-- pass down parent props in common with a child component -->
<child-component v-bind="$props"></child-component>
src: https://v2.vuejs.org/v2/api/#v-bind
You can also use slots, or scoped slots, which are commonly used for things like wrapping error messages in more complex markup.
If all elements are consecutively arranged as in your example, you can use v-for as below:
<span v-for="(criteria, msg) in {'Your reply cannot be empty.': !$v.initialReplyText.required, 'Your reply cannot be over 2,000 characters.': !$v.initialReplyText.maxLength }"
v-if="criteria" class="error">
{{msg}}
</span>
I'm displaying data from a back-end system. The data comes from a table that is for a window of time receiving new rows. I have a mechanism to fetch those rows within an angular timer. My question, given the template below, how can i add those new rows to my list as shown below without redrawing the entire list.
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
<p>Heroes:</p>
<ul>
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
</ul>
`
Since you are using angular 2+ version, you need not worry about the redrawing list part as it will handle it automatically using shadow DOM.
have you looked the obserbvables from rxjs?
http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html
they can provide a variable that automaticaly updates with the new value provided
Let me assume that I have the following architecture
_components (folders)
x1.html
x2.html
x3.html
I have a first page where I got the information from the YAM section for every component.
At this point I would like to add a link for every component to another page where I will display the component in a bigger manner.
So, let me assume I have, in the first page :
<div class="col-md-1">
<span id= "logos" class="material-icons"></span>
</div>
and In the componentbig.html I would like to open the right component on the basis of the link.
Do you have any suggestions for me ?
If I understand You correctly, then collections might be the feature You are looking for. For example, I'm usually using collections to generate a list of products and then have a specific page for each product also. Also make sure You check the easy tutorial by Ben Balter.
I have put together a custom element using Polymer - <x-flickr> (http://tamas.io/x-flickr-custom-polymer-element/ || https://github.com/tamaspiros/x-flickr) - it essentially makes a REST call to the Flickr API and returns photos based on a search:
<polymer-jsonp id="ajax" auto url="http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key={{apikey}}&tags={{tag}}&per_page={{amount}}&page=1&format=json&jsoncallback="></polymer-jsonp>
This call returns some information about a particular photo but not everything. I'd like to reuse the unique ID returned via this call and make a second REST call to get further detail about the image. At the moment I display the photos via:
<template id="photos" repeat="{{photo in photos}}">
<div class="thumbnail">
<img src="http://farm{{photo.farm}}.staticflickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}.jpg" class="img-thumbnail">
</div>
</template>
but I'd like to extend that so that I get the description of the photo as well (and this is the information that is not being returned by the first REST call displayed above) - so my template would look something like this:
<template id="photos" repeat="{{photo in photos}}">
<div class="thumbnail">
<img src="http://farm{{photo.farm}}.staticflickr.com/{{photo.server}}/{{photo.id}}_{{photo.secret}}.jpg" class="img-thumbnail">
<p>{{photo.description}}</p> <!-- this should come from the 2nd API call -->
</div>
</template>
What's the best way of achieving this?
I forked your project so you can see the details of what I'm about to describe here https://github.com/sjmiles/x-flickr.
The short answer to your question is to include a request element (polymer-ajax) inside the template repeat. That causes a request to spawn for each item in the repeat, and gives you easy access to the item data (the photo id in this case).
As I mentioned, you can see an example of how this can be done in the source here: https://github.com/sjmiles/x-flickr/blob/master/x-flickr.html#L46.
A few other notes:
You don't need JSONP for these requests, simple Ajax calls will do, you can access the JSON directly. I used polymer-ajax instead of polymer-jsonp.
You almost never need addEventListener in Polymer because you can listen to events using on-<eventName>="methodName" syntax directly in the HTML. In this case, you don't need to use events at all, because you can do the work with data binding.
This could be done completely script-free, but I kept your script for setting photos property and sending the x-flickr-load event.
HTH
One way to tackle this: http://jsbin.com/yihovepi/1/edit (also includes some refactoring)
The <p>{{photo.description}}</p> is always in the template, but the .description is filled later by dynamically creating <polymer-jsonp> for each photo.
Note, I'm also using binding to the main polymer-jsonp element's response property:
<polymer-jsonp id="ajax" response="{{response}}">
This is super changed because the corresponding responseChanged() callback is called when that value is populated from the request.