Vue.jsで作成したWebページが一瞬だけ表示されて消えてしまう

前提・実現したいこと

まずやってみる機械学習～AWS SAGEMAKER/REKOGNITIONとVUEで作る画像判定WEBアプリケーション（後編）
http://www.intellilink.co.jp/article/column/ai-ml02.html
を参考にしながら、SAGEMAKERのテストを行いたいのですが、
「2-3. 動作確認」にて表示させたい画面が一瞬表示されたあと、真っ白なページに変わってしまいます。

発生している問題・エラーメッセージ

Chromeの開発者ツールでは、下記が出力されています。

ReferenceError: results is not defined
    at hn.eval (eval at xa (vue.min.js:6), <anonymous>:3:950)
    at hn.fn._render (vue.min.js:6)
    at hn.i (vue.min.js:6)
    at St.get (vue.min.js:6)
    at new St (vue.min.js:6)
    at hn.$mount (vue.min.js:6)
    at hn.$mount (vue.min.js:6)
    at hn._init (vue.min.js:6)
    at new hn (vue.min.js:6)
    at main.js:1

該当のソースコード

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ITA</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/siimple@3.1.0/dist/siimple.min.css">
</head>
<body>
  <div id="app">
    <div>
      <div class="siimple-navbar siimple-navbar--extra-large siimple-navbar--primary">
          <div class="siimple-navbar-title">Image Classification Example</div>
          <div class="siimple-navbar-subtitle">ITA</div>
      </div>
       
      <div class="siimple-content siimple-content--extra-large">
          <div class="siimple-grid">
              <div class="siimple-grid-row">
                  <div class="siimple-grid-col siimple-grid-col--6 siimple-grid-col--sm-6">
                      <div class="siimple-h2">Select Image file</div>
                        <input type="file" id="file" @change="onFileChange">
                         
                      <div class="siimple-content siimple-content--Medium">
                          <div v-if="image">
                              <img :src="image" /><br>
                              <div class="siimple-btn siimple-btn--primary siimple-btn" v-on:click="uploadImage()">Upload</div>
                          </div>
                      </div>
                  </div>
 
                  <div class="siimple-grid-col siimple-grid-col--6 siimple-grid-col--sm-6">
                      <div class="siimple-h2">Result - SageMaker</div>
                        <div class="siimple-list">
                            <div class="siimple-list-item" v-for="result in results">{{ result }}</div>
                        </div>
                      <div class="siimple-h2">Result - Rekognition</div>
                        <div class="siimple-list">
                            <div class="siimple-list-item" v-for="result in responses">{{ result }}</div>
                        </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>
 
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
  <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
  <script src="./main.js"></script>
</body>
</html>

Vue.js

let app = new Vue({
  el: '#app',
  data: {
    image: '',
    results_classification: [],
    results_rekognition: [],
  },
  methods: {
    onFileChange: function(e) {
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
 
      this.showImage(files[0]);
      this.results_classification = [];
      this.results_rekognition = [];
    },
    showImage: function(file) {
      let freader = new FileReader();
 
      freader.onload = (e) => {
        this.image = e.target.result;
      };
      freader.readAsDataURL(file);
    },
    uploadImage: function(e) {
      let config = {
        headers: {
          'content-type': 'application/octet-stream',
        }
      };
 
      axios
        .post(
          "https://<<ENDPOINTのURL>>/api/classification",
          this.image,
          config
        )
        .then(response => {
            this.results_classification = response.data.split(",");
        })
        .catch(error => {
            console.log(error);
        });
 
      axios
        .post(
          "https://<<ENDPOINTのURL>>/api/rekognition",
          this.image,
          config
        )
        .then(response => {
            this.results_rekognition = response.data.split(",");
        })
        .catch(error => {
            console.log(error);
        });
    }
  }
})

試したこと

main.js の Vue.js のバージョンを最新のv2.6.10に書き換えてみたが駄目だった。

補足情報

一瞬画面には表示されるので、

  <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
  <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
  <script src="./main.js"></script>

あたりで呼び出しているvueやaxiosが原因かと思うのですが、原因がわかりませんでした。

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

回答1件

ベストアンサー

エラーメッセージにあるようにresultsが定義されていませんね。

投稿2019/06/27 07:30

shozi3

総合スコア691

R.Mizukami

2019/06/28 05:55

HTML の `<div class="siimple-list-item" v-for="result in results">{{ result }}</div>` の部分ですね。

useretc

2019/06/28 15:30

shozi3さん、R.Mizukamiさん、回答ありがとうございました。エラーコードの results is not defined という箇所で、"results"の定義が必要なことがわかりました。ただ恥ずかしながら私はプログラマではないこともあり、次にどこに"results"を定義してあげればよいかすらわからないのです。お手数ですが、もう少し詳しく教えていただけないでしょうか。