![]() Let’s see an example of this in practice. The directive can be used on a template element and requires a specific syntax along the lines of: ![]() The v-for directive is used to render a list of items based on a data source. ![]() In Vue, the first thing that should come to mind to accomplish this is the v-for directive. Let’s say we wanted to render a list of components (like a list of tweet-component items) based on a large data source obtained from a server. We can think of tweet-component as a shell that takes data of sorts, such as the username, handle, tweet, and avatar, among other pieces, and simply displays those pieces in a consistent markup. This is in part due to using reusable web components.įor example, we can see the list of tweets as a list of single tweet-component items. Though this data is dynamically obtained, the way this data is shown remains the same. As a result, we can say all this data is dynamic. The content displayed in these lists depends on a multitude of factors - our Twitter history, whom we follow, our likes, and so on. On the homepage, we’ve become accustomed to seeing a list of trends, a list of tweets, a list of potential followers, and so on. When logged in and in the main index route of Twitter, we’re presented with a view similar to this: We’re going to use Twitter as the case study for this article. Since we’ll be explaining things thoroughly as we start to write code, this article assumes you’ll have no or very little knowledge with Vue (and/or other JavaScript frameworks). We’ll also go through some examples of why the key attribute should be used when doing so. In this article we’ll gather an understanding of Vue’s v-for directive in generating dynamic lists. In almost every web application we use, we can see lists of content in numerous areas of the app. Dynamic list rendering is often used to present a series of similarly grouped information in a concise and friendly format to the user. List rendering is one of the most commonly used practices in front-end web development. By Hassan Djirdeh An introduction to dynamic list rendering in Vue.js
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |