-
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
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으로 지정하는것이 맞는 것일까요?
답변을 작성해보세요.
0
0
김석훈
지식공유자2020.10.12
안녕하세요. 독자님.
vue-table-dynamic 설명에 있는 샘플 코드는 모두 vue-cli 및 webpack 툴이 필요한 코드 들 입니다.
즉 샘플 코드의 방식은 저의 1차 동영상과는 방식이 다르고, 2차 동영상에서 설명하는 방식 입니다.
그러므로, vue-cli 및 webpack 을 별도로 공부해서, 위 샘플 코드를 사용해 보기 바랍니다.
또는 저의 2차 동영상 강의(~ 실전편)도,
Vuetify 의 v-data-table 을 사용해서 CRUD 기능을 개발하는 내용이므로,
한번 살펴 보시기 바랍니다.
감사합니다.
답변 2