Vue.jsのテキストフィールドの値をEnterでリストに追加する

Vue.js

input type="text"に入力したデータがlistに追加されていくやつ。

f:id:websier:20210425105144p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js</title>
</head>
<body>
<div id="app">
  <form ref="form" @submit.prevent>
    <input type="text" @keydown.enter="trigger" v-model="message" placeholder="enter something..."/>
  </form>
  <div>追加される内容： {{ message }}</div>
  <ul>
    <li v-for="content in contents">{{ content }}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="js/add_table.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    message: '',
    contents: ['aaaa', 'bbbb']
  },
  methods: {
    trigger: function(event) {
      if (event.keyCode !== 13) return
      console.log(this.message);
      this.contents.push(this.message);
      this.message = '';
    }
  }
})