• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    해결됨

vue js 오픈소스 연동

20.10.12 17:21 작성 조회수 222

0

안녕하세요, 

강의보면서 django + vue.js의 간단한 crud를 작성하고자 하는 1인입니다.

아래의 vue.js로 작성된 테이블 ui를 django에 연동하고자 합니다.

https://vuejsexamples.com/a-vue-component-of-dynamic-table/

설치

 npm install vue-table-dynamic --save

아래는 샘플 예제코드인데, web debugger, console 탭에 보면, 오류는 나지 않는데, 테이블이 출력되지 않습니다. 어떤부분이 잘못되었을까요? 오류라도 출력하면 좋겠는데, 반응이 없으니 답답합니다.  static은 "node_modules"로 지정하였습니다. 

<template>
<div class="base-demo" style="width: 400px">
<vue-table-dynamic :params="params"></vue-table-dynamic>
</div>
</template>


<script type="module" src="{% static 'vue-table-dynamic/dist/index.min.js' %}">
import VueTableDynamic from 'vue-table-dynamic'

export default {
name: 'Demo',
data() {
return {
params: {
data: [
['Cell-1', 'Cell-2', 'Cell-3'],
['Cell-4', 'Cell-5', 'Cell-6'],
['Cell-7', 'Cell-8', 'Cell-9']
]
}
}
},
components: { VueTableDynamic }
}

</script>

한가지 더 궁금한점은 npm으로 패키지 설치한 경로를 static으로 지정하는것이 맞는 것일까요?

답변 2

·

답변을 작성해보세요.

0

남상준님의 프로필

남상준

질문자

2020.10.13

아 감사합니다. 2차강의는 추석에 신청했는데 아직 보지 못했네요. 강의 및 vue-cli, webpack 참조하겠습니다. 감사합니다.

0

안녕하세요. 독자님.

vue-table-dynamic 설명에 있는 샘플 코드는 모두 vue-cli 및 webpack 툴이 필요한 코드 들 입니다.

즉 샘플 코드의 방식은 저의 1차 동영상과는 방식이 다르고, 2차 동영상에서 설명하는 방식 입니다.

그러므로, vue-cli 및 webpack 을 별도로 공부해서, 위 샘플 코드를 사용해 보기 바랍니다.

또는 저의 2차 동영상 강의(~ 실전편)도,

Vuetify 의 v-data-table 을 사용해서 CRUD 기능을 개발하는 내용이므로,

한번 살펴 보시기 바랍니다.

감사합니다.