What are some examples of list rendering in Vue?

What are some examples of list rendering in Vue?

In Vue.js, list rendering is done using the v-for directive. For example, you can render a list of items like this: <code><div v-for="item in items" :key="item.id">{{ item.name }}</div></code>.

Can you show me a more complex example?

Sure! Here's a more complex example where we render a list of users with their details: <code><ul> <li v-for="user in users" :key="user.id"> <h2>{{ user.name }}</h2> <p>{{ user.email }}</p> </li> </ul></code>.

What if I want to add a button for each item?

You can easily add a button inside the v-for loop. For example: <code><li v-for="item in items" :key="item.id"> {{ item.name }} <button @click="handleClick(item)">Click Me</button> </li></code>.

How do I handle the button click?

You can define a method in your Vue instance to handle the button click. For example: <code>methods: { handleClick(item) { alert('You clicked on ' + item.name); } }</code>.