Reactive List Rendering and State
Learn how a rendered list updates itself when the data changes. Also, learn how to use the "key" attribute for list elements.
We'll cover the following...
Reactive list rendering
As we know, the template of a Vue instance binds to the data properties so that any change in data properties is automatically reflected in the DOM. Similarly, the v-for directive binds the element to the array which it renders. If an array in the data is updated, the elements based on it will reflect the changes and re-render according to the updated array.
Please run the executable application below to see the effect of updating the list on the rendered elements. In this example, a list of flowers and the list elements are rendered using the v-for ...