Nayha

<template>
 	<div>{{ this.titleChk }}</div>
</template>

    data() {
        return {
            title:'',
         }
    },

    watch: {
            title(){
               // title input 이 비어있거나 혹은 공백일때 처리
                var blank_pattern = /^\s+|\s+$/g;
                if( _.isEmpty(this.title) || this.title.replace( blank_pattern, '' ) == "" ){
                    this.titleChk= false
                }else{
                    this.titleChk= true
                }
            }
    },

<script>
    export default {
        data() {
            return {
                inputs: [
                    { id: Date.now(), name: '', lastName: '' }
                ]
            }
        },
        methods: {
            displayRef(ref) {
                console.log(this.$refs[ref]) // <= accessing the dynamic ref
                console.log('The value of input is:',this.$refs[ref][0].value) //<= outpouting value of input
            },
            displayAllRefs() {
                console.log(this.$refs)
            }
        }
    }
</script>

참조 : https://stackoverflow.com/questions/45563329/how-to-add-dynamic-ref-in-vue-js

  methods: {
        btcTrkAPICall: function () {
            axios    
                .get('https://www.api1.com/api/ticker')    
                .then(response => (this.btctrk = response.data))    
                .catch(error => console.log(error))    
        },
        bnncAPICall: function () {
            axios    
                .get('https://api.api2.com/api/v3/ticker/bookTicker')    
                .then(response => (this.bnnc = response.data))    
                .catch(error => console.log(error))    
        },
        intervalFetchData: function () {
            setInterval(() => {    
                this.btcTrkAPICall();
                this.bnncAPICall();
                }, 1000);    
        }
    },
    mounted () {
        // Run the functions once when mounted 
        this.btcTrkAPICall();
        this.bnncAPICall();
        // Run the intervalFetchData function once to set the interval time for later refresh
        this.intervalFetchData();
    }

https://stackoverflow.com/questions/54601694/how-to-auto-refresh-a-computed-property-at-axios-in-vuejs

구글 검색 해도 오래 걸려서 .. 따로 정리 

webpack.config.js 설정

test: 정규표현식 : 정규표현식과 같은 파일 찾아준다.

정규표현식.test(문자)이렇게 사용하면 문자 내부에 정규표현식과 일치하는 내용 확인하는 것)
use: 'vue-loader': test를 잘 할 수 있게 vue-loader의 도움을 받는다.

//const VueLoaderPlugin = require('vue-loader/dist/plugin');
const { VueLoaderPlugin } = require('vue-loader');
const path = require('path')

module.exports = {
    mode: 'development',
    //대표가 되는 파일 ( 하나로 합쳐진다 vue + js ..)
    entry:{
        app:  path.join(__dirname,'main.js')
    },
    module:{
        rules:[{
            test: /\.vue$/,
            loader: 'vue-loader',
        }],

    },
    plugins: [
        new VueLoaderPlugin(),
    ],
    //./output/app.js 로 최종 합쳐진 js 생성
    output:{
        filename: 'app.js',
        path: path.join(__dirname,'output'),
    },

};

최종 코드 

압축된 js

_.remove

마지막 객체가 삭제가 안되는거.. 쓰앙 삽질을 몇번을 하는거니..

그냥 

스크립트 기본 기능인 spice 로 하기로 함

근데 계속 안됨.. slice 로 입력하고 테스트 하고 있었음 ..

죽어서 고쳐질 삽질에 연속 ...

셀렉트 박스에서 선택 된 데이터 옆으로 쌓임 

쌓인 데이터 삭제 코드 공유

let temp = this.전체리스트

temp.splice(temp.indexOf(삭제값(유저클릭값)),1)

            const array = [1, 2, 3, 4, 5]; // 3 을 제거 하고 싶다. 
            const deletedIndex = 2	       // 3의 인덱스는 2 이다.
            array.splice(deletedIndex, 1); // 삭제할 인덱스, 1 개만 삭제 (즉, 3만 삭제)

끝 

잊지 않겠다 lodash   remove .. 쓰밤쉐

3depth 구현

<template>
    <div>
        <ul>
            <li v-for="item in treeData" :key="item.name">
                {{ item.name }}
                <ul v-if="item.type === 'directory' && item.children">
                    <li v-for="childItem in item.children" :key="childItem.name">
                        {{ childItem.name }}

                        <ul v-if="childItem.type ==='directory' && childItem.children">
                            <li v-for="childItem in childItem.children" :key="childItem.name">
                            {{ childItem.name }}
                            </li>
                        </ul>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>

export default {
    name: 'testView',
    data() { //함수 형태
        return {
            treeData: [{
                "name": "root",
                "type": "directory",
                "children": [
                    {
                        "name": "folder1",
                        "type": "directory",
                        "children": [
                            {
                                "name": "file1.txt",
                                "type": "file"
                            },
                            {
                                "name": "file2.txt",
                                "type": "file"
                            }
                        ]
                    },
                    {
                        "name": "folder2",
                        "type": "directory",
                        "children": [
                            {
                                "name": "subfolder1",
                                "type": "directory",
                                "children": [
                                    {
                                        "name": "file3.txt",
                                        "type": "file"
                                    }
                                ]
                            },
                            {
                                "name": "file4.txt",
                                "type": "file"
                            }
                        ]
                    },
                    {
                        "name": "file5.txt",
                        "type": "file"
                    }
                ]
            }],
        }
    },
    methods: {
        toggleNode(item) {
            if (item.type === 'directory' && item.children) {
                item.expanded = !item.expanded;
            }
        }
    }

}

</script>
<style>
ul {
    list-style: none;
    padding: 0;
}

li {
    cursor: pointer;
}

.nested {
    display: none;
}

.active {
    display: block;
}
</style>

const testData = test:{ t1: 1	,t2:2	,t3:3 }

var obj = {
   "a": "test1",
   "b": "test2",
   "c": "test3",
}

Object.keys(obj).filter(key => key !== 'b').map(key => obj[key])

개발자 도구 열어서 해보심 됩니다~

1. cors 오류 
   헤더에 Allo..: "*" 해도 안됨.. 

   vue.config.js 
     proxy 설정
     기존 설정을 건드리면 안되니 /url/ 조건 추가..
     아래 설정 침고
    devServer: {
        proxy: {
            '/api': {
                target: "http://localhost:8080",
            },
            '/oauth':{
                target: 'https:// cors 가 걸리는 도메인/,
            }          
        }
    },

2. 항상 서버에서 전달된 키를 잘 확인하자
   클라이언트아이디+시크릿키 base64로 조합하는거였는데 앞부분만 확인하고 뒤 시크릿키가 잘못되어 있었다.
   2시간 이상 삽질..

3. Content-Type application/x-www-form-urlencoded
   으로 데이터를 전달할때는
    // form 객체 생성
       let frm = new FormData()
       frm.append('code', '코드')
    위 방법으로 하면 header가 muilty 어쩌고로 고정되어 날라갔다..
    그래서 form 을 히든으로 변경했더니 header는 변경 되었지만 
    urldecode 문제가 발생하여
    grant type is not supporte  등 파라미터가 제대로 전달되지 않았다.

    해서 또 찾아본게 URLSearchParams
    const params = new URLSearchParams();
    params.append('param1', 'value1');
    params.append('param2', 'value2');
    axios.post('/foo', params);

    위 방법으로 정상적으로 form 데이터 전달 할 수 있었다..

    삽질에 연속이였다.

    다음에도 까먹겠지.. 그럴꺼야 빡 -_ㅠ

사내 방화벽 등으로 막힐때 설정 

npm config set strict-ssl false

세팅하기 힘들구만