<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <div id="app">
      <h1>{{ title }}</h1>
      <table class="table table-hover table-sm">
        <thead class="thead-dark">
          <tr>
            <th v-for="key in keys">{{ key }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="list in lists" :class="{ isComplete: list.status == 'complete', isDone: list.status == 'done' }">
            <td>{{ list.id }}</td>
            <!-- IE11 では template が使用できませんでした -->
            <!--<template v-if="list.status">-->
            <!--  <td><a :href="list.url" target="_blank">{{ list.title }}</a></td>-->
            <!--  <td><a :href="list.url" target="_blank">{{ list.url }}</a></td>-->
            <!--</template>-->
            <!--<template v-else>-->
            <!--  <td>{{ list.title }}</td>-->
            <!--  <td>{{ list.url }}</td>-->
            <!--</template>-->
            <td v-if="list.status"><a :href="list.url" target="_blank">{{ list.title }}</a></td>
            <td v-else>{{ list.title }}</td>
            <td v-if="list.status"><a :href="list.url" target="_blank">{{ list.url }}</a></td>
            <td v-else>{{ list.url }}</td>
            <td>{{ list.status }}</td>
            <td>{{ list.etc }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script>
    <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>
(function(global, $) {
  var sid = 'AKfycbwF2jhIhPUOWjpDhEmbaAe5YPp_06pU-UAC6ZpWBmstlt1fEOQ';
  var ssJsonUrl = 'https://script.google.com/macros/s/'+sid+'/exec';
  var app = new Vue({
    el: '#app',
    data: {
      title: 'サイトマップテンプレ',
      lists: null,
      keys: null
    },
    created: function () { // created() の書き方はNGでした
      this.setData();
    },
    methods: {
      setData: function() { // setData() の書き方はNGでした
        var that = this;
        axios.get(ssJsonUrl)
          .then(function (response) {
            that.lists = response.data;
            that.keys = Object.keys(that.lists[0]);
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
  });
})(window, jQuery);
table tr.isDone {
  background-color: #ffc;
}

table tr.isComplete {
  background-color: #ccc;
}