vue js 오픈소스 연동
안녕하세요,
강의보면서 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
안녕하세요. 독자님.
vue-table-dynamic 설명에 있는 샘플 코드는 모두 vue-cli 및 webpack 툴이 필요한 코드 들 입니다.
즉 샘플 코드의 방식은 저의 1차 동영상과는 방식이 다르고, 2차 동영상에서 설명하는 방식 입니다.
그러므로, vue-cli 및 webpack 을 별도로 공부해서, 위 샘플 코드를 사용해 보기 바랍니다.
또는 저의 2차 동영상 강의(~ 실전편)도,
Vuetify 의 v-data-table 을 사용해서 CRUD 기능을 개발하는 내용이므로,
한번 살펴 보시기 바랍니다.
감사합니다.
들여쓰기 단축키가 어떻게 되나요?
0
252
1
mixin 에러가 나서 실행이 안되요.
0
420
4
화면 에러화면이 자꾸 뜨네요..
0
416
4
todo_form.html 하단에 todo_List.html의 리스트가 오게 하고 싶습니다.
0
352
1
bootodo.html에서 Vue 코드가 적용되지 않습니다.
0
576
1
cdn vue버전
3
720
2
bootstrap 팝업창 만들기 단원에서 질문있습니다.
0
920
3
MultipleObjectMixin get 메소드 상속
0
252
1
Vue에서 파일 업로드시
0
718
1
vue django 연동 질문
0
500
1
장고 프론트엔드 백엔드 분리 관련 질문입니다 !
0
491
1
home화면에서 이미지가 안보입니다.
0
293
2
이 강의와 새로 만드신 강의의 차이점을 알고 싶습니다.
0
300
1
좋은 강의 감사합니다.
0
249
1
staticfiles가 static으로 바뀌었습니다.
0
278
1
장고 3.1에서 다음과 같이 바뀌었습니다.
0
291
2
Vuejs 와 Reactjs의 차이
0
356
1
createView에서 success_url
0
252
1
강의자료 HtmlTodo.zip 파일 구글드라이브에서 바이러스로 인식해서 다운로드 안됩니다.
1
269
2
object에 왜 todo 컬럼이 추가되는지?
0
205
2
django_only 실습중 에러 제보
0
274
3
BaseListView
1
270
1
todo_confirm_delete.html
1
342
1
값이 전달 안됩니다
1
215
2





