Help us understand the problem. What is going on with this article?

Vue.jsでSPA - [4] コンポーネントにしてみる

Vue.jsでSPA - [4] コンポーネントにしてみる



vue.js:597 [Vue warn]: Property or method "location" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See:

found in

---> <Anonymous>
         <ElContainer>... (1 recursive calls)


参考にあげたサイトを読む.とくに青空コメントアウトmille-feuille codeがわかりやすい(たぶん同じ人が書いてる).コンポーネントの書き方は三通りあるらしい.

Vueはvue-cliでセットアップする方法が一般的っぽいけど,今回はひとまず軽く試そうと思ってCDNで始めてしまった.そのため,三通りの中で一番わかりやすそうな単一ファイルコンポーネントがつかえなさそう(いや,WebpackBrowserifyでごにょごにょやればできそうだが,それ自体が目的じゃないので Yak Shaving は今はしないようにする)ひとまずtemplateオプションを使う方法で進めてみる.


<!DOCTYPE html>

  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="">
  <!-- import Vue before Element -->
  <script src=""></script>
  <!-- 1. import Vue router -->
  <script src=""></script>
  <!-- import JavaScript -->
  <script src=""></script>
  <script src=""></script>
  <link rel="stylesheet" href="../app.css">

  <div id="app">
      <el-header height="100px">
        <img src="../static/img/placeholder-logo-2-300x167.png" height="100" align="left">
      <el-aside width="200px">
        <el-col :span="24">
          <el-menu default-active="1" class="el-menu-vertical-demo">
            <el-menu-item index="1">
              <i class="el-icon-location"></i>
              <!-- 6. When clicking, it loads the contents defined in 2 and 1 -->
              <router-link to="/location"><span>Location</span></router-link>
            <el-menu-item index="2">
              <i class="el-icon-document"></i>
              <!-- 6. When clicking, it loads the contents defined in 2 and 1 -->
              <router-link to="/foo"><span>foo</span></router-link>
            <el-menu-item index="3">
              <i class="el-icon-setting"></i>
              <!-- 6. When clicking, it loads the contents defined in 2 and 1 -->
              <router-link to="/bar"><span>bar</span></router-link>

        <!-- 7. The contents will be load here -->


// 2. Define route components.
const Location = { template: '<location-table></location-table>' } // 9. Use the component here
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 3. Define some routes
const routes = [
  { path: '/location', component: Location },
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }

// 4. Create the router instance and pass the `routes` option
const router = new VueRouter({
  routes // short for `routes: routes`

// 8. Define component
Vue.component('location-table', {
  data: function() {
    return {
      location: [{id: 1, name: 'Site1', country: 'USA', metro: 'San Jose', market: 'US', status: 'Active'},
                  {id: 2, name: 'Site2', country: 'USA', metro: 'San Mateo', market: 'US', status: 'Active'},
                  {id: 3, name: 'Site3', country: 'USA', metro: 'San Rafael', market: 'US', status: 'Active'}]
  template: `
      <el-table :data="location" style="width: 100%">
        <el-table-column prop="id" label="id" width="100"></el-table-column>
        <el-table-column prop="name" label="name"></el-table-column>
        <el-table-column prop="country" label="country" width="180"></el-table-column>
        <el-table-column prop="metro" label="metro" width="180"></el-table-column>
        <el-table-column prop="market" label="market" width="180"></el-table-column>
        <el-table-column prop="status" label="status" width="180"></el-table-column>

var vm = new Vue({
  // 5. Inject the router in the Vue instance
  el: '#app'




1. 8. Define component9.Use the component hereを追加
2. それにともなってvar vm = new Vuedata部分をコンポーネント側へ移す



Image from Gyazo


  1. 公式
  2. 青空コメントアウト
  3. Qiita - コンポーネントのtemplateの書き方まとめ
  4. mille-feuille code
  5. 公式 - シングルファイルコンポーネント




Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away