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.
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 directive. A ...