Question

从具有本地数据/对象的选择框进行更改时，我无法将更新的数据填充到子组件。但是，当我在API的帮助下单击提交按钮时，我每次都可以将数据加载到子组件。当我从选择框进行更改时，我需要帮助来使用更新的数据刷新我的子组件。找到我正在尝试的以下代码。当我第一次更改更改子组件中的props时，也是如此，但是当我这样做时，它不会转到子组件，它会停止我父组件本身。

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

无法在Vue js 2中使用@change更新数据

1 个答案: