[Vuejs]-Initialize components in for loop from array data

0👍

You’ve assigned an id of left-menu-button to each of your buttons. You’ve then told Vue to mount something into that id. The first element (i.e. first button) with that id will be treated as the mounting element, which blows away the text.

You should remove the ids from all elements within your templates. The only id should be the one within your HTML file. For styling purposes use classes instead of ids. Then create a single Vue instance (just one call to new Vue, not two) targeting the id of the element inside your HTML file.

It is possible to create multiple Vue instance directly using new Vue but that is rarely necessary. To do that you would need to have multiple target elements within your HTML file.

Leave a comment