Mutating props vue-warn
뷰에서 컴포넌트를 선언후 props로 값을 부모로 부터 받을때 해당 값을 직접 변경 할려고 할때 warn이 나타납니다.
아래의 코드를 보면 v-model=”propsData”로 직접 select 값을 바꾸는데 값을 바꿀수 있다 이때 warn 메시지가 나타난다.
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
31
|
const selectDiscountByShowYnIsN ={
data: function(){
return {
discounts: [],
}
},
props: {
propsData: String
},
template:`
<select class="form-control" name="discountByShowYnIsN" v-model="propsData">
<option value="">선택해주세요</option>
<option v-for="discount in discounts" v-bind:value="discount.discSeq" v-text="discount.discName">
</option>
</select>
`,
created: function () {
this.getDiscountByShowYnIsN();
},
methods:{
getDiscountByShowYnIsN: async function () {
let response = await fetch(
'/api/test');
let data = await response.json();
this.discounts = data;
}
}
};
|
이렇게 다시 변수를 선언해서 쓰는 방법
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
31
32
|
const selectDiscountByShowYnIsN ={
data: function(){
return {
discounts: [],
data : this.propsData
}
},
props: {
propsData: String
},
template:`
<select class="form-control" name="discountByShowYnIsN" v-model="data">
<option value="">선택해주세요</option>
<option v-for="discount in discounts" v-bind:value="discount.discSeq" v-text="discount.discName">
</option>
</select>
`,
created: function () {
this.getDiscountByShowYnIsN();
},
methods:{
getDiscountByShowYnIsN: async function () {
let response = await fetch(
'/api/test');
let data = await response.json();
this.discounts = data;
}
}
};
|
참조
