Vue js 2에서 @change로 데이터를 업데이트 할 수 없습니다.

Question

로컬 데이터/개체가있는 선택 상자에서 변경 작업을 수행 할 때 하위 구성 요소에 업데이트 된 데이터를 채울 수 없습니다. 하지만 API를 사용하여 제출 버튼을 클릭 할 때마다 하위 구성 요소에 데이터를로드 할 수 있습니다. 선택 상자에서 변경 작업을 수행 할 때 업데이트 된 데이터로 하위 구성 요소를 새로 고치는 데 도움이 필요합니다. 아래 코드를 찾으십시오. 그것도 처음으로 자식 컴포넌트의 소품을 업데이트 할 때 변경했지만 자식 컴포넌트로 이동하지 않으면 부모 컴포넌트 자체를 중단합니다.

구성 요소-1 :

<template> 
<div> 
<div class="row"> 
    <select v-model="selectedemp" @change="filterempdata($event.target.value)"> 
     <option value="">Select emp/option> 
     <option v-for="option in empfilterlist" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option> 
    </select> 
</div> 
<div class="compone"> 
    <empView v-if='loaded' :empDetails='empData'></empView> 
</div> 
<div class="col-lg-6 col-md-6"> 
    <button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="getEmpDetails">Fetch Data</button> 
</div> 
</div> 
</template> 

<script> 
import updatedemp from './empView' 
export default { 
name: 'cluster', 
components: { 
    'empView': updatedemp 
}, 
data() { 
    return { 
    loaded: false, 
    emptData: {}, 
    empfilterlist: [ 
     { text: 'Department', value: '1' }, 
     { text: 'Status', value: '2' }, 
    ], 
    selectedemp: '', 
    } 
}, 
methods: { 
filterempdata: function (selectedoption) { 
    console.log('Onchange value - ' + selectedOption) 
    Vue.set(this.empData, 'Department', selectedoption) 
}, 
getEmpDetails: function() { 
    this.$http.get('http://localhost:7070/getemmdata') 
     .then((response) => { 
     this.empData = response.data 
     this.loaded = true 
     }, 
     response => { 
     console.log('test' + JSON.stringify(response)) 
     } 
    ) 
    } 
}  
} 
</script> 

구성 요소 : 2

<template> 
    <div class="empView"> 
    <div class="col-lg-6 col-md-6"> 
    <h3>{{ empid }}</h3> 
    </div> 
    <div class="col-lg-6 col-md-6"> 
    {{ empname }} 
    </div> 
    </div> 
</template> 

<script> 
    export default { 
    name: 'empView', 
    props: ['empDetails'], 
    data() { 
     return { 
     empid: this.empDetails.id, 
     empname: this.empDetails.name 
     } 
    }, 
    watch: { 
     workflowDetails: function (changes) { 
     console.log('data updated ' + JSON.stringify(changes)) 
     this.empid = changes.id 
     this.empname = changes.name 
     this.department = changes.Department 
    } 
    } 
} 
</script> 

Answer 1

첫 번째 문제는 여기에 있습니다 :

기본적으로

filterempdata: function (selectedoption) { 
    console.log(') 
    this.empData.WorkflowFilter = selectedoption 
    this.empData = this.empData 
} 

, empData은 다음과 같습니다

data() { 
    return { 
    loading: false, 
    emptData: null, 

그래서 this.empData.WorkflowFilter = selectedoption은 작동하지 않아야하며 this.empData = this.empData도 작동하지 않습니다.

빈 개체를 기본값으로 만들고 선택에 따라 업데이트하면됩니다 (그냥 WorkflowFilter으로 설정).

트릭을 수행해야합니다. 또 다른 이상한 것은 loading 속성입니다. 홀수인 loading = true 인 경우에만 두 번째 구성 요소가 표시됩니다. 대신 loaded을 사용 하시겠습니까?