無法使用Vue中的@change更新數據js 2

Question

當使用本地數據/對象從選擇框進行導通時，我無法將更新的數據填充到子組件。但是我可以每次在API的幫助下單擊提交按鈕時將數據加載到子組件。當我從選擇框執行更改時，需要使用更新的數據來刷新我的子組件。找到我正在嘗試的下面的代碼。這也是我第一次進行on-change時它正在更新子組件中的道具，但是當我這樣做時，它不會去子組件，它會停止我的父組件本身。

組件-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代替？