Vueのメソッドプロパティに記述されている処理結果を表示するためにはどうすれば良いでしょうか？

下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

【質問の主旨】

Vueのメソッドプロパティに記述されている処理結果を、htmlファイルに表示するためにはどうすれば良いでしょうか？対象のコードは以下の【質問の補足】で示すコードです。

【質問の補足】

1. index.html のコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Vue App</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <ul id="app" v-for="set in sets">
      <li v-for="n in even(set)">{{ n }}</li>
    </ul>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
</body>
</html>

2. main.js のコード

var example1 = new Vue({
  
  el: '#app',
  data: {
    sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
  },
  methods: {
    even: function (numbers) {
      return numbers.filter(function (number) {
        return number % 2 === 0
      })
    }
  }
  
})

3. コンソールの内容

index.htmlのコンソールを確認しましたが、特にエラー表示はされていません。

4. コードの引用元

上記のコードの大部分はVue.jsの公式サイトから引用しています。

以上、ご確認よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

Vueをマウントする要素に直接v-forなどのディレクティブを指定してはいけません。以下のようにしましょう。

html
1  <div id="app">
2    <ul v-for="set in sets">
3      <li v-for="n in even(set)">{{ n }}</li>
4    </ul>
5  </div>

投稿2021/09/10 06:11

ku__ra__ge

総合スコア4524

echizeyayota

2021/09/10 06:30

ku__ra__ge さん。コメントありがとうございます。 >Vueをマウントする要素に直接v-forなどのディレクティブを指定してはいけません。ご指摘のようにVueをマウントする要素とディレクティブを別のタグにすると、 - 2 - 4 - 6 - 8 - 10 の数値が表示されました。今後ともどうぞよろしくお願いします。

行動規範の内容に同意します