Vueマーキングタスクが動作していないときに切り替える

Question

私が間違っていることを理解していないので、もう一度尋ねます。これは私がやったチュートリアルであり、チュートリアルと同じように行った。私はマークされているタスクと実行されていないタスクの間でトグルしようとしています。私がコードを実行すると、それはトグルされず、エラーもありません。私は文書を読んだが、私は完全に理解していない。私はプログラミングが初めてです。

let bus = new Vue(); 

    let Task = { 
     props: ['task'], 
    template: ` 
    <div class="task" :class="{ 'task--done' : task.done , 'task-notdone' : task.done === false }"> 


     {{ task.body }} 
     <a href="#" v-on:click.prevent="toggleDone(task.id)">Mark me as {{ task.done ? 'not done' : 'done' }}</a> 

    </div> 
    `, 

    methods: { 
     toggleDone(taskId) { 
     bus.$emit('task:toggleDone', taskId); 
     } 
    } 

    }; 

    let Tasks = { 
     components:{ 
     'task': Task 
     }, 

     data() { 
    return { 
     tasks: [ 
     {id: 1, body: 'Task One', done: false }, 
     {id: 2, body: 'Task Two', done: true }, 
     {id: 3, body: 'Task Three', done: true } 
     ], 
    } 
     }, 

     template: ` 
    <div> 
    <template v-if="tasks.length"> 
    <task v-for="task in tasks" :key="task.id" :task="task"></task> 
    </template> 
     <span v-else>No tasks</span> 
       <form action=""> 
       form 
       </form> 
     </div> 
      `, 

     methods: { 
    toggleDone(taskId){ 
     let task = this.tasks.find(function (task) { 
     return task.id === taskId; 
     }); 

     console.log(task); 
    } 
     }, 

     mounted() { 
    bus.$on('task:toggleDone', (taskId) => { 
     this.toggleDone(taskId); 
    }) 
    }, 
    }; 

    let app = new Vue({ 
     el:'#app', 
     components: { 
     'tasks': Tasks, 

     }, 


    }); 

Answer 1

なぜチュートリアルでバスを使用しているのかわかりません。ここでは必要ないだけです。 javascriptオブジェクトであるタスクのリストがあり、各タスクオブジェクトがタスクコンポーネントに渡されています。これはjavascriptオブジェクトであり、プリミティブな値ではないため、タスクコンポーネントのdoneプロパティを更新できます。

console.clear() 
 

 
let Task = { 
 
    props: ['task'], 
 
    template: ` 
 
    <div class="task" > 
 
     <span :class="{ 'task--done' : task.done , 'task-notdone' : !task.done}">{{ task.body }}</span> 
 
     <a href="#" v-on:click="task.done = !task.done">Mark me as {{ task.done ? 'not done' : 'done' }}</a> 
 
    </div> 
 
    ` 
 
}; 
 

 
let Tasks = { 
 
    components:{ 
 
    'task': Task 
 
    }, 
 
    data() { 
 
    return { 
 
     tasks: [ 
 
     {id: 1, body: 'Task One', done: false }, 
 
     {id: 2, body: 'Task Two', done: true }, 
 
     {id: 3, body: 'Task Three', done: true } 
 
     ], 
 
    } 
 
    }, 
 
    template: ` 
 
    <div> 
 
     <template v-if="tasks.length"> 
 
     <task v-for="task in tasks" :key="task.id" :task="task"></task> 
 
     </template> 
 
     <span v-else>No tasks</span> 
 
    </div> 
 
    `, 
 
}; 
 

 
let app = new Vue({ 
 
    el:'#app', 
 
    components: { 
 
    'tasks': Tasks, 
 
    }, 
 
});

.task--done{ 
 
    text-decoration: line-through 
 
}

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script> 
 
<div id="app"> 
 
    <tasks></tasks> 
 
</div>

、コンポーネント内のオブジェクトを変異させたくない場合はまた、あなたの代わりに親がそれを変異させることができますイベントを発することができます。

console.clear() 
 

 
let Task = { 
 
    props: ['task'], 
 
    template: ` 
 
    <div class="task" > 
 
     <span :class="{ 'task--done' : task.done , 'task-notdone' : !task.done}">{{ task.body }}</span> 
 
     <a href="#" v-on:click="$emit('toggle-task', task)">Mark me as {{ task.done ? 'not done' : 'done' }}</a> 
 
    </div> 
 
    ` 
 
}; 
 

 
let Tasks = { 
 
    components:{ 
 
    'task': Task 
 
    }, 
 
    data() { 
 
    return { 
 
     tasks: [ 
 
     {id: 1, body: 'Task One', done: false }, 
 
     {id: 2, body: 'Task Two', done: true }, 
 
     {id: 3, body: 'Task Three', done: true } 
 
     ], 
 
    } 
 
    }, 
 
    template: ` 
 
    <div> 
 
     <template v-if="tasks.length"> 
 
     <task v-for="task in tasks" :key="task.id" :task="task" @toggle-task="toggleTask"></task> 
 
     </template> 
 
     <span v-else>No tasks</span> 
 
    </div> 
 
    `, 
 
    methods:{ 
 
    toggleTask(task){ 
 
     task.done = !task.done 
 
    } 
 
    } 
 
}; 
 

 
let app = new Vue({ 
 
    el:'#app', 
 
    components: { 
 
    'tasks': Tasks, 
 
    }, 
 
});

.task--done{ 
 
    text-decoration: line-through 
 
}

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script> 
 
<div id="app"> 
 
    <tasks></tasks> 
 
</div>