Karice의 여행 & 코딩 블로그

상황

같은 컴포넌트를 사용하지만, URL만 바뀌여서 새로 rendering이 안되는 상황

하지만 새로운 URL로 페이지를 바꿔주고 싶은 상황

this.$router.push(`/api-doc/${api_path_id}`)

위의 코드로 실행하니, URL은 수정이 되는데 페이지는 전혀 변동이 없다.

Data의 변동도 없어서 보니, Created가 실행안되는 상황이었다.

해결방법

Watch를 $route에 걸어주었다.

$route(URL)이 바뀌면서 새로 데이터를 받아오도록 설정했다.

새로고침 할 필요없이, 새로 데이터를 받아오고 뿌려주었다.

  watch: {
    $route() {
      this.pending = true
      const query = this.$route.params.apiId
      this.init(query).then(() => {
        this.pending = false
      })
    }
  },

상황

자주 실수하는 것중 하나.

기존 List가 있고, Api를 통해 리스트의 값을 받아서 기존 List에 저장했는데, 화면에는 전혀 변화가 없는 경우

해결방법

새로운 List객체에 Api로 받은 리스트를 받고, 기존 List에 새로운 List객체를 대입한다.

Vue의 reactivity 시스템은 모든 변화를 감지하지 못합니다..(언제그러는지는 정확하게 모르겠으나 개발하다보면 왕왕 있습니다..)

그래서 변화를 감지하지 못할때 강제 리렌더링을 해줍니다.

코드

아래와 같은 코드는 headerList가 기존 리스트이다.

새로운 열을 추가하고 싶을때는 아래와 같이 해준다.

...this.headerList는 기존 리스트를 뜻한다.

addHeaderRow() {
  this.headerList = [
    ...this.headerList,
    {
      header_name: '',
      header_value: ''
    }
  ]
},

참고

https://hyeonyeee.tistory.com/97

상황

v-text-input에서 별점을 입력받는데, 1~5사이의 값만 받고, 만약 5이상의 값을 넣어도, 5로 설정하고 싶었다.

해결방법

@input.native를 사용하면 된다.

:max, :min값은 줘도 생각보다 별로였다.

코드

// HTML

<v-text-field
  @input.native="handleInput_solution" //input 값 5이상이면 변경하게하기
  type="number" //숫자만 받게 하기
  placeholder="선택"
/>

//Script
handleInput_solution(ev) { // 5이상 값을 넣으면 5로 만들어주는 함수
  if (Number(ev.target.value) > 5){
    this.reviewSurveyAnswers.solution = 5
  }
},

참고

https://stackoverflow.com/questions/57063387/setting-max-and-min-limit-on-input-field

상황

Vue에서 리스트 안에 체크박스들을 넣었는데, 전체선택하는 함수를 만들고 싶었다.

해결방법

모든 리스트를 돌면서 현재 체크 상황과 똑같이 해주면 된다. 의외로 간단함

코드

HTML 코드

  <tbody>
    <tr
      v-for="(row, index) in paramList"
      :key="row.id"
      :style="row.param_apply ? null : { opacity: 0.4 }"
    >
      <td>
        <v-checkbox
          v-model="row.param_apply"
          @change="apply_check" //이부분!!
        />
      </td>
      <td>
        <TextInput
          v-model="row.param_name"
          dense
          required
          :error-messages="inputCheck(row.param_name, 'Param_Name')"
        />
      </td>
      <td>
        <v-text-field
          v-model="row.param_value"
          dense
          :error-messages="
            inputCheck(row.param_value, 'Param_Value')
          "
        />
      </td>
      <td>
        <v-text-field v-model="row.param_desc" dense />
      </td>
      <td>
        <v-btn x-small fab depressed>
          <v-icon color="error" @click="removeParamRow(index)">
            mdi-minus
          </v-icon>
        </v-btn>
      </td>
    </tr>
  </tbody>

Script

checkedAll(checked) {
  this.allChecked = checked
  for (let i in this.paramList) {
    this.paramList[i].param_apply = this.allChecked
  }
},

참고

https://linked2ev.github.io/vue/2020/12/06/Vue-%EB%AA%A9%EB%A1%9D%EC%97%90%EC%84%9C-%EC%B2%B4%ED%81%AC%EB%B0%95%EC%8A%A4(checkbox)-%EC%A0%84%EC%B2%B4%EC%84%A0%ED%83%9D-%EB%B0%8F-%EC%A0%84%EC%B2%B4%ED%95%B4%EC%A0%9C(all-selected,-deselected)/ 

상황

Object를 만들었는데, 내가 원하는 key값이 있는지 체크하려고 했음

해결방법

1. in을 사용하는 방법

2. Object.hasOwnProperty 사용하는 방법

코드

1. in을 사용하는 방법

const object_2 = {
	test_1:'test 1',
    test_2:undefined
}

console.log( 'test_1' in object_2 ) // true
console.log( 'test_2' in object_2 ) // true
console.log( 'test_3' in object_2 ) // false

2. Object.hasOwnProperty 사용하는 방법

const object_1 = {
	test_1:'test 1'
}

console.log( object_1.hasOwnProperty('test_1') ) // true
console.log( object_1.hasOwnProperty('test_2') ) // false

const object_2 = {
	test_1:'test 1',
    test_2:undefined
}

console.log( object_2.hasOwnProperty('test_1') ) // true
console.log( object_2.hasOwnProperty('test_2') ) // true

참고

https://velog.io/@minong/Javascript-%EA%B0%9D%EC%B2%B4%EC%97%90-%ED%95%B4%EB%8B%B9-key%EA%B0%92%EC%9D%B4-%EC%A1%B4%EC%9E%AC%ED%95%98%EB%8A%94%EC%A7%80-%ED%99%95%EC%9D%B8%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

상황

v-btn을 특정 변수의 값이 들어가있을때만 활성화해주고 싶었음.

해결방법

disabled에 조건문을 넣으면 된다.

코드

두가지 방법이 있다.

그냥 넣기

<v-btn
  class="mx-3"
  x-large
  :disabled="pending" //pending이 true일때만 버튼이 보여짐
>

삼항연산자 넣기

<input 
	type="text" 
    id="name" 
    class="form-control" 
    name="name" 
    v-model="form.name" 
    :disabled="validated ? disabled : ''"
>

참고

http://daplus.net/javascript-vue-js%EC%97%90%EC%84%9C-%EC%A1%B0%EA%B1%B4%EB%B6%80%EB%A1%9C-%EC%9E%85%EB%A0%A5%EC%9D%84-%EB%B9%84%ED%99%9C%EC%84%B1%ED%99%94%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/

상황

자주 잊어버리고 실수 할 수 있는 상황들을 모아봤다.

1. every 함수와 filter함수 사용법

2. td/tr에 css넣을 때 주의 할점

3. margin, padding 넣는 방법

4. mounted와 created 차이점 10초 요약

해결방법

1. every와 filter같은 함수의 parameter에는 함수를 넣어줘야한다. (변수나 결과값을 넣어주면 안됨)

2. tr 아래에 td가 있어서, tr에만 css를 적용시켜줬다. 그러나 td에도 css가 설정되어 있으면 일일히 다 설정을 바꿔줘야 함. (자식 css가 우선)

3. vuetify에서 padding과 margin 넣을때는 ,mt, pt를 사용하자.

4. mounted는 created 보다 전에 실행되는데, DOM이 아직 안만들어졌을 때라서 init을 할때 쓰인다. created는 잘 안쓰이는데 스크롤 위치 조정, 포커스 등의 엘리먼트에 동작을 가할때 주로 사용한다.

코드

1. Every는 배열의 값을 모두 인자 함수로 돌려준다. ex) Allchecked (O), Allchecked() (X)

items.every((item) =>
  typeof item === 'object' ? item.text && item.value : !_.isNil(item)
)

2. 따로 없음. tr에 값들 다 따로 넣어주자.

3. mt(MarginTop), pt(PaddingTop), mr(MarginRight) 이렇게 값을 주면된다. -를 쓰고 옆에 숫자 넣기

<v-text-field
  class="mt-0 pt-0"
  desne
/>

4. mounted 사용법

async mounted() {
    try {
      await this.init(query)
    } catch (e) {
      this.error = true
      console.error(e)
    }
},

참고

내 머릿속

상황

JS에서 배열을 다루는데, 특정 값을 제일 앞,뒤에 넣어주고 싶었음.

해결방법

push와 unshift 사용

제일 앞에 추가 - unshift

제일 뒤에 추가 - push

코드

test = new Array()

test = [2,3]

test.push(4) //제일 뒤에 4 추가

// test 상황 = [2,3,4]

test.unshift(1) //제일 앞에 1추가

//test = [1,2,3,4]

참고

https://webisfree.com/2015-06-22/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-%EB%B0%B0%EC%97%B4%EC%97%90-%EA%B0%92-%EC%95%9E-%EB%98%90%EB%8A%94-%EB%92%A4%EC%97%90-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0-unshift()-push() 

상황

v-btn의 버튼색과 글자색을 각각 바꾸고 싶었다.

primary나 error같은 기본으로 설정된 색이 아니라, 내가 원하는 색으로.

해결방법

먼저 표준 색상을 알아보자.

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
    
Vue.use(Vuetify);
    
export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#14C6FF", //기본
        secondary: "#424242", //기본
        accent: "#82B1FF", //기본
        error: "#FF5252",
        info: "#2196F3",
        success: "#4CAF50",
        warning: "#FFC107",
        lightblue: "#14c6FF",
        yellow: "#FFCF00",
        pink: "#FF1976",
        orange: "#FF8657",
        magenta: "#C33AFC",
        darkblue: "#1E2D56",
        gray: "#909090",
        neutralgray: "#9BA6C1",
        green: "#2ED47A",
        red: "#FF5c4E",
        darkblueshade: "#308DC2",
        lightgray: "#BDBDBD",
        lightpink: "#FFCFE3",
        white: "#FFFFFF"
      }
    }
  }
});

이 위에 적혀있는 gray, white이런 색들은 그냥 바로 입력하면 된다.

그 외의 색은 어떻게 할까?

코드

기존에 설정된 색 사용

<v-btn 
	color="primary" //버튼색 변경
	class="red--text" //글자색 변경 --text 붙여주기
>

커스텀한 색 사용

<v-btn
  color="rgba(105, 128, 150, 1)" //버튼색 변경
  class="" //텍스트는 색을 지정해주고 --text를 설정해줘야한다. 
>

참고

https://cyworld.tistory.com/5586

상황 :

처음 init 할때 초기화가 제대로 안됐다. init함수를 호출하는데, 함수 결과값이 늦게 나와서, 계속해서 업데이트가 안됐다.

해결방법 : 

Vuetify를 쓰는 경우는 v-progress-bar를 사용해보자.

로딩이 다 됐는지 확인하는 변수 loading을 False로 선언하고,

init을 시작할때 True로 바꿔주고 끝날때 False로 바꾸자.

그리고 v-progress-bar에 v-if="loading"을 걸어주면,

init이 다될때까지 로딩바가 돌아가고, 완벽하게 로딩이 되면 제대로 된 값을 보여준다.

예시 : 

    <v-progress-linear v-if="loading" indeterminate />
    <div v-else> //여기는 이제 제대로 됐을경우 나올 코드를 아래써주면 됨

async mounted() { //init 호출
    try {
      await this.init(query)
    } catch (e) {
      this.error = true
      console.error(e)
    }
  },

async init() { // init 예시
    this.loading = true
    await this.fetchReviewDetail()
    this.loading = false
},

참고 

https://vuetifyjs.com/en/api/v-progress-linear/