Vue.js에서 SPA - [4] 구성 요소로 시도

지난번 계속

이전 라우팅으로 화면 전환했을 때 테이블의 값 data을 읽지 못하고 다음 오류로 화내는 문제에 대해서는 어쨌든 구성 요소화하여 HTML과 JS를 동적으로 링크 (리액티브?)시킬 수 있습니다. 어떻게 든 예감이 있었으므로 구성 요소에 대해 알아보십시오.

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: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

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

구성요소?

참고로 올린 사이트을 읽는다. 특히 푸른 하늘 코멘트 아웃과 mille-feuille code를 알기 쉽다 (아마 같은 사람이 쓰고 있다). 구성 요소를 작성하는 방법은 세 가지입니다.

Vue는 vue-cli에서 설정하는 방법이 일반적이지만, 이번에는 일단 가볍게 시도하려고 CDN으로 시작했다. 그 때문에, 3가지 중에서 가장 알기 쉬운 단일 파일 컴퍼넌트가 잡히지 않을 것 같아(아니, Webpack나 Browserify로 어쩌면 할 수 있을 것 같지만, 그 자체가 목적이 아니기 때문에Yak Shaving는 지금은 하지 않게 한다) 일단 template 옵션을 사용하는 방법으로 진행해 보자.

부분 컴포넌트화된 코드

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 1. import Vue router -->
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.1/locale/en.js"></script>
  <link rel="stylesheet" href="../app.css">
</head>


<body>
  <div id="app">
    <el-container>
      <el-header height="100px">
        <img src="../static/img/placeholder-logo-2-300x167.png" height="100" align="left">
      </el-header>
    <el-container>
      <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>
            <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>
            <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>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-aside>

     <el-main>
        <!-- 7. The contents will be load here -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  </div>
</body>

<script>

// 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>
      </el-table>
  `
})

ELEMENT.locale(ELEMENT.lang.en)
var vm = new Vue({
  // 5. Inject the router in the Vue instance
  router, 
  el: '#app'
})

</script>

</html>

전회부터의 변경점

자꾸 말하면
1. 8. Define component 및 9.Use the component here 추가
2. 이에 따라 var vm = new Vue의 data 부분을 컴포넌트 측으로 옮긴다.

이제 오류가 사라졌습니다. 우선 움직이고 있다. 구성 요소는 나중에 파일을 나누는 것이 좋습니다 ...