Mikhail-Martynenko / todo-list-vue

0 stars 0 forks source link

Новый компонент TaskList #2

Open mordvinsky opened 1 year ago

mordvinsky commented 1 year ago

https://github.com/Mikhail-Martynenko/todo-list-vue/blob/3d67f3d2ff1ac84e0040084ecabd2d3d3d482dbf/src/App.vue#L8-L9

mordvinsky commented 1 year ago

Реализуй новый компонент, использование:

<List :data="tasks">
  <template v-slot="{ item, index}">
    <li :key="item.id"> 
       <input type="checkbox" v-if="!item.completed" @change="completedTask(index)">
       <span :class="{ completed: item.completed }">{{ item.text }}</span>
       <button class="delete-button" @click="deleteTask(index)">❌</button>
    </li>
  </template>
</TaskList>
mordvinsky commented 1 year ago

List - нужно придумать самостоятельно. Посмотри (1) что такое слоты, (2) как передавать пропсы в слоты, (3) что такое template, (4) что такое именованные слоты