Vue3.0.0-rc10 でdata内で定義した連想配列をpushする方法


#1

Vue初心者です。用語が正しくない可能性があります。よろしくお願いします。
特に何も考えず、最新版で作成しようとしたところのエラーですので、
旧バージョン(Vue2等)を使うなどの点も踏まえてアドバイスをいただければと思います。
よろしくお願いします。

vue --version 3.0.0-rc.10
において、下記のようなTodoリストを作成・表示をしようとしています。
内部変数(data)に連想配列の変数todosを持ち、add/delete/editなどでtodosを変更したい。
addについては、todos.pushで実現しようと考えていた。

■現象:
addをクリックしても、追加したtodoが表示されず、初期画面(todoが4つある画面)が表示される

■src/app.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>Todo Management.</h1>
    <hr />
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

■src/components/helloworld.vue

<template>
  <div>
    {{ msg }}
    <form>
      <button v-on:click="addTodo()">ADD TASK</button>
      <button>DELETE FINISHED TASKS</button>
      <p>input: <input type="text" v-model="newTodo"></p>
      <p>task: {{ newTodo }}</p>
    </form>
    <div class="task-list">
      <label class="task-list__item" v-for="todo in todos" :key="todo.text" v-on:enter="addTodo()">
        <input type="checkbox"><button>EDIT</button>{{ todo.text }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  name: "hello",
  data: function() {
    return {
      msg: "Welcome to Your Vue.js App",
      todos: [
        { text: "vue-router", done: false },
        { text: "vuex", done: false },
        { text: "vue-loader", done: false },
        { text: "awesome-vue", done: true }
      ],
      newTodo: ""
    };
  },
  method: {
    addTodo: function() {
      let text = this.newTodo && this.newTodo.trim();
      if (!text) {
        return;
      }
      var xTodo = { text: text, done: false };
      let clone_xTodo = { ...xTodo };
      this.todos.push(clone_xTodo);
      this.newTodo = "";
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@mixin flex-vender() {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
}
.task-list {
  @include flex-vender;
  flex-direction: column;
  align-items: center;
  &__item {
    width: 270px;
    text-align: left;
    $element: #{&};
    &--checked {
      @extend #{$element};
      color: #85a6c6;
    }
  }
}
</style>

#2

src/components/helloworld.vue の method -> methods ではないかと思います.
動作確認していないので,違ったらごめんなさい!

(ちなみに,3.0.0-rc10 は Vue-CLI のバージョンだと思います.vue --version コマンドは Vue-CLI のものなので.)