마카로닉스

1779 No

Vue.js Json 데이터 읽어 오기

2021-11-12 01:15:45 By 라이트 0 212 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3</title>
    <script src="https://unpkg.com/vue@next"></script>
    
</head>
<body>
<!-- json 데이터 샘플 -->
<a href="https://jsonplaceholder.typicode.com/" target="_blank">json 데이터 샘플</a><br><br>

    <div id="app">
        <input type="file" @change="onFileChange">
        <p>읽어 들인 데이터 
            {{loadData}}
        </p>
    </div>

<script>
    const JsonFileUpload = {
        data() {
            return {
                loadData:''
            }
        },

        methods: {
            onFileChange(e){
                const file =e.target.files[0];
                if(file){
                    console.log(file);
                    const reader =new FileReader();
                    const thisParent=this;
                    reader.onload=function(e){
                        const jsonToArray=JSON.parse(e.target.result);
                        thisParent.loadData=jsonToArray;
                    },
                    reader.readAsText(file);
                }
            }
        },
    }
    Vue.createApp(JsonFileUpload).mount('#app');    
</script>

</body>
</html>