板橋隊長のVue.js中級講座-Webアプリケーションを作成することで学ぶVue。js, ES6, Vuex課を整理しました.
毎日20分ちょっとVuejs中級給油.
IDE: Visual Studio Code
クロムビュー開発者ツール:Vue.js devtools

現在のアプリケーション構造の問題

保留中のものを追加/削除した場合、ローカルストレージのステータスはすぐに画面に反映されません.
コンポーネント間でデータ通信が必要です.

改善されたアプリケーション構造

ローカルに格納されているtodoItemsをアプリケーションコンポーネントのtodoItemsに同期します.
アプリケーションコンポーネントが行うべきことを知っているリストtodoItems.
アプリを容器にしましょう

propsとevent emit

TodoListはpropsdataを使用してtodoItemsデータを取得します.
TodoInputコンポーネントはイベントを追加し、TodoFooterは削除イベントをAppにアップロードします.

改善すべき内容

保留中のリストが表示されます:todoItemsスキーマをアプリケーションで管理する

保留事項を追加:TodoListのデータをAppにアップロードします.

削除

保留

待機事項

を完了する
保留中のすべての事項を削除する

保留中のリストの表示を改善

todoItemsアレイを適用します.vueに管理させましょう

App.vueの配列データをTodoListに変換します.vueに下がります.(propsプロパティを使用)

1.TodoListのtodoItems配列をAppコンポーネントに移動します。

[App.vue]のtodoItemsで管理

dataに整列todoItemsを作成します.

export default {

  data: function(){
    return {
      todoItems: []
    }
  },

localStorageのデータをtodoItems配列のcreatedプロパティに配置

TodoList.アプリケーションがvueで定義した作成済みプロパティ.直接Vueに移動しましょう
今はアプリですvueを作成すると、localStorageのデータをtodoItems配列に配置します.

created: function(){
    if (localStorage.length > 0) {
      for(var i = 0; i< localStorage.length; i++){
        if (localStorage.key(i) !== 'loglevel:webpack-dev-server') {
          this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
        }
      }
    }
  }

2.AppのtodoItems配列をTodoListコンポーネントに下げる

App.vueのtodoItems配列をpropsdataとしてサブアセンブリtodoListにドロップします.

v-bindを使用してサブpropsプロパティを適用します。vueのpropsdataに接続します。

App.vueのテンプレートには4つの構成部品が含まれています.
PropsプロパティをTodoListコンポーネントに接続します.

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <TodoInput></TodoInput>
    <TodoList v-bind:propsdata="todoItems"></TodoList>
    <TodoFooter></TodoFooter>
  </div>
</template>

このアプリはpropsdataをvueのテンプレートに接続します.
配列データはpropsdataというprops属性に下がります.

TodoList.vueにpropsdataというpropsプロパティを作成します。

export default {
  props: ['propsdata'],

リスト出力for文propsdataからデータを抽出します。

<li v-for="(todoItem, index) in propsdata" v-bind:key="todoItem.item" class="shadow">
        <i class="checkBtn fas fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" 

その他の保留事項を改善する

TodoInputで入力した値を親コンポーネントAppに上げます.

event emit再温:バインドイベント名とメソッド名。

子構成部品のイベントを親構成部品のメソッドに関連付ける
v-on:サブ構成部品のイベント名=「現在の構成部品のメソッド名」

1.TodoInputが入力した値を親コンポーネントAppにアップグレードします。

ToDoInputに値を追加すると、addTodoメソッドが機能します.

    addTodo: function(){
      if (this.newTodoItem !== ''){
        this.$emit('addTodoItem', this.newTodoItem);
        this.clearInput();
      }
    },

重要:addToDoItem名のemitを定義し、newToDoItem入力値をパラメータで渡します。

this.$emit('addTodoItem', this.newTodoItem);

2. App.vueのtemplateでサブイベント名とメソッドをバインドする

サブイベント名が「addTodoItem」の場合、アプリケーション。vueのメソッドaddOneItemが機能します。

<TodoInput v-on:addTodoItem="addOneItem"></TodoInput>

App.vueのテンプレートコード

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <TodoInput v-on:addTodoItem="addOneItem"></TodoInput>
    <TodoList v-bind:propsdata="todoItems"></TodoList>
    <TodoFooter></TodoFooter>
  </div>
</template>

3. App.vueのaddOneItemメソッド配列値の更新

addOneItemのパラメータtodoItemは、emitイベントからアップロードされたデータです.
todoItemsアレイにtodoItemsを追加します.

    addOneItem: function(todoItem){
      var obj = {completed: false, item: todoItem}
      localStorage.setItem(todoItem, JSON.stringify(obj));
      this.todoItems.push(obj);
    }

TodoList.vueのemit定義:this.newTodoItemをパラメータに上げる

this.$emit('addTodoItem', this.newTodoItem);

やるべきことを追加すると、すぐにリストに反映されます。

次の授業では、待機事項を削除する機能を改善します.