If your data is coming from a database this is typically an easy decision, just use the id or uid or whatever it's called on your particular resource. Ok, so I should use it but how? First, the key attribute should always be a unique value for each item in the array being iterated over. This is encouraged by the official ES Lint Plugin for Vue that includes a vue/required-v-for-key rule and will probably save you some headaches in the long run.
V for vue how to#
Throughout my experience with Vue I've seen some misunderstanding around the key attribute (as well as had plenty of misunderstanding of it on my own) and so I want to provide some tips on how to and how NOT to use it. Thus it does not have to create any new DOM elements or move any DOM elements if it doesn't have to. The purpose of this key attribute is to give "a hint for Vue's virtual DOM algorithm to identify VNodes when diffing the new list of nodes against the old list" ( from Vue.js Docs).Įssentially, it helps Vue identify what's changed and what hasn't. See the list rendering guide for details.When working with v-for in Vue it is typically recommended to provide a special key attribute. When used together with v-if, v-for has a higher priority than v-if. See the style guide for further information. Using v-if and v-for together is not recommended. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime. Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. In comparison, v-show is much simpler - the element is always rendered regardless of initial condition, with CSS-based toggling.
V-if is also lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time. V-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles. Note that v-show doesn’t support the element, nor does it work with v-else. The difference is that an element with v-show will always be rendered and remain in the DOM v-show only toggles the display CSS property of the element. v-showĪnother option for conditionally displaying an element is the v-show directive. Note that the elements are still efficiently re-used, because they don’t have key attributes. Since both templates use the same elements, the is not replaced - just its placeholder.Ĭheck it out for yourself by entering some text in the input, then pressing the toggle button:
V for vue code#
Then switching the loginType in the code above will not erase what the user has already entered. For example, if you allow users to toggle between multiple login types: Username Email Beyond helping make Vue very fast, this can have some useful advantages. Vue tries to render elements as efficiently as possible, often re-using them instead of rendering from scratch. Similar to v-else, a v-else-if element must immediately follow a v-if or a v-else-if element. The v-else-if, as the name suggests, serves as an “else if block” for v-if. You can use the v-else directive to indicate an “else block” for v-if: 0.5">Ī v-else element must immediately follow a v-if or a v-else-if element - otherwise it will not be recognized.
The final rendered result will not include the element. But what if we want to toggle more than one element? In this case we can use v-if on a element, which serves as an invisible wrapper. It is also possible to add an “else block” with v-else: Vue is awesome! Oh no 😢 Conditional Groups with v-if on īecause v-if is a directive, it has to be attached to a single element. The block will only be rendered if the directive’s expression returns a truthy value. The directive v-if is used to conditionally render a block.
V for vue free#
Learn how conditional rendering works with a free lesson on Vue School v-if
0 kommentar(er)
