Lists and Components

[wtsang11]

Convert HTML codes for display https://www.plus2net.com/html_tutorial/tags-page.php

Simple use of v-for to display a list

<ul>
<li v-for="task in tasks">{{ task }}</li>
</ul>

 data() {
    return {
      tasks: ['Go to shop', 'Get bananas', 'Get apples'],
    };
  },

[wtsang11]

v-for to display a list of objects

<ul>
<li v-for="(task, index) in tasks">
<div>{{ task.name }} {{ index }}</div>
<small>{{ task.dueDate }} @ {{ task.dueTime }}</small>
<button @click="deleteTask(index)">X</button>
</li>
</ul>

[wtsang11]

error of missing composition-api

Module not found: Error: Can't resolve '@vue/composition-api' in

Solution: npm i --save @vue/composition-api

[wtsang11]

passing data to child component example

The parent side

<ul> <task v-for="(task, index) in tasks" :task="task" :index="index"> </task> </ul>

components: { task: require('components/Task.vue').default, },

The child component side (delete button not working yet)

<template> <li> <div>{{ task.name }} {{ index }}</div> <small>{{ task.dueDate }} @ {{ task.dueTime }}</small> <button @click="deleteTask(index)">X</button> </li> </template> <script> import { defineComponent } from '@vue/composition-api';

export default { props: ['task', 'index'] }; </script>

<style scoped> </style>

[wtsang11]

Passing data with a slot to a child component example

Parent side

<ul> <task v-for="(task, index) in tasks" :task="task" :index="index"> {{ task.name }} </task> </ul>

components: { task: require('components/Task.vue').default, },

Child side (props array is still required)

<template> <li> <div><slot></slot>{{ index }}</div> <small>{{ task.dueDate }} @ {{ task.dueTime }}</small> <button @click="deleteTask(index)">X</button> </li> </template> <script> import { defineComponent } from '@vue/composition-api';

export default { props: ['task', 'index'], }; </script>

<style scoped> </style>

[wtsang11]

Use id as explicit key to clear the warning:

(Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

Note: key is needed because the array of data can change in order and size. Key is the reliable way to identify individual item of data.

Solution

data

tasks: [ { id: 1, name: 'Go to shop', dueDate: '2021/01/01', dueTime: '18:30' }, { id: 2, name: 'Get bananas', dueDate: '2021/01/03', dueTime: '10:30' }, { id: 3, name: 'Get apples', dueDate: '2021/01/11', dueTime: '12:30' }, ],

binding the task.id as key in v-for directive

<ul> <task v-for="(task, index) in tasks" :key="task.id" :task="task" :index="index"> {{ task.name }} </task> </ul>

[wtsang11]

v-for to display objects with an image

Note the use of binding for image src attribute:

<div class="q-pa-md row items-stretch"> <div v-for="food in foods" class="card shadow-1"> <img :src="food.image" width="198" height="180" /> <div class="card-content"> <h1 class="text-primary">{{ food.name }}</h1> <p>{{ food.description }}</p> <p> <small> <b>Delicousness:</b> </small> <b class="text-primary"> {{ food.deliciousness }} </b> </p> </div> </div> </div>

data

data() { return { foods: [ { id: 1, name: 'Burger', description: 'A burger is a sandwich consisting of one or more cooked patties of ground meat, usually beef, placed inside a sliced bread roll or bun.', deliciousness: '4/5', image: 'https://i.imgur.com/0umadnY.jpg', }, { id: 2, name: 'Pizza', description: 'Pizza is a savory dish of Italian origin, consisting of a usually round, flattened base of leavened wheat-based dough.', deliciousness: '5/5', image: 'https://i.imgur.com/b9zDbyb.jpg', }, { id: 3, name: 'Sprouts', description: 'The Brussels sprout is a member of the Gemmifera Group of cabbages, grown for its edible buds.', deliciousness: '1/5', image: 'https://i.imgur.com/RbKjUjB.jpg', }, ], }; },