无法使用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代替？