[Vue2] 오류: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: ""

다음과 같은 오류가 발생했다.
Vue warn이라 그런지 동작하는데 문제는 없지만, 그래도 이런 오류는 해결해주는게 인지상정😉

 

부모 component가 다시 렌더링되면 값이 overwritten되기 때문에 prop을 직접 변화시키는걸 피하라면서, 
data나 computed를 사용하라고 한다.

---

Vue2의 공식문서에서 다음과 같이 설명되어있다.

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.

모든 props는 자식 속성과 부모 속성 사이에 단방향 다운 바인딩을 형성한다. 부모 속성이 업데이트되면 자식 속성으로 흘러가지만 그 반대는 아니다. 이렇게 하면 하위 component가 실수로 상위 상태를 변형시키는 것을 방지할 수 있으며, 이로 인해 앱의 데이터 흐름을 이해하기 어려울 수 있다.

또한 상위 component가 업데이트될 때마다 하위component의 모든 props가 최신 값으로 새로 고쳐진다.
즉, 하위 component 내부의 props를 변형하지 않아야 한다. 그러면 Vue가 콘솔에서 경고를 표시한다.

JavaScript의 객체와 배열은 참조를 통해 전달되므로, Prop가 배열 또는 객체인 경우 하위 구성 요소 내의 객체 또는 배열 자체를 변경하면 상위 상태에 영향을 미칩니다.

 

1. prop은 초기 값을 전달하는데 사용되며, 하위 component는 나중에 local data property로 사용하려고 한다.
   이 경우에는 prop을 초기 값으로 사용하는 local data property를 정의하는 것이 좋다.

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

 

2. prop은 변환해야 하는 값으로 전달되는 경우, prop의 값을 사용하여 compted property를 정의하는 것이 좋다.

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

---

❌이전 코드

var SearchBar = {
    props:{
        srchText: {
            type: String,
            default: [],
            description: ""
        },
        absRootPath:{
            type: String
        }
    },
    methods:{
        goSearch: function(){
            location.href = this.absRootPath + 'product/productSearch.php?srchText='+ this.srchText;
        }
    },
    template:`
    <div class="input-group mb-3">
        <input type="search" class="form-control search-input" v-model="srchText" placeholder="search..." aria-describedby="button-addon2" @keyup.enter="goSearch">
        <a class="btn btn-outline-secondary search-button" id="button-addon2" :href="absRootPath + 'product/productSearch.php?srchText='+ srchText"><i class="fa-solid fa-magnifying-glass"></i></a>
    </div>

    `
};

✔ 바꾼 코드

var SearchBar = {
    props:{
        srchText: {
            type: String,
            default: [],
            description: ""
        },
        absRootPath:{
            type: String
        }
    },
    data() {
        return{
            searchText : this.srchText
       }
    },
    methods:{
        goSearch: function(){
            location.href = this.absRootPath + 'product/productSearch.php?srchText='+ this.searchText;
        }
    },
    template:`
    <div class="input-group mb-3">
        <input type="search" class="form-control search-input" placeholder="search..." aria-describedby="button-addon2" @keyup.enter="goSearch"  v-model="searchText" >
        <a class="btn btn-outline-secondary search-button" id="button-addon2" :href="absRootPath + 'product/productSearch.php?srchText='+ searchText"><i class="fa-solid fa-magnifying-glass"></i></a>
    </div>

    `
};