<h2>Immutable</h2>
{#each todos as todo}
<label on:click="toggle(todo.id)">
<span>{todo.done ? "đ": "âšī¸"}</span>
<ImmutableTodo {todo}/>
</label>
{/each}
â
<h2>Mutable</h2>
{#each todos as todo}
<label on:click="toggle(todo.id)">
<span>{todo.done ? "đ": "âšī¸"}</span>
<MutableTodo {todo}/>
</label>
{/each}
â
<script>
import ImmutableTodo from './ImmutableTodo.html';
import MutableTodo from './MutableTodo.html';
â
export default {
immutable: true,
â
methods: {
toggle(id) {
const { todos } = this.get();
â
this.set({
todos: todos.map(todo => {
if (todo.id === id) {
// return a new object
return {
id,
done: !todo.done,
text: todo.text
};
}
â
// return the same object
xxxxxxxxxx
{
todos: [
{ id: 1, done: true, text: "wash the car" },
{ id: 2, done: false, text: "take the dog for a walk" },
{ id: 3, done: false, text: "mow the lawn" }
]
}
â