मैं मूल घटक में axios के साथ DB से नया डेटा प्राप्त करना चाहता हूं और उस डेटा को चाइल्ड कंपोनेंट में पास करना चाहता हूं। लेकिन मूल घटक पुराने डेटा को पास करता है (जो अभी तक अक्ष के साथ अपडेट नहीं हुआ है।)

मुझे लगता है कि यह axios के साथ समस्या नहीं है। क्योंकि मैं मूल घटक में मौजूद एक्सियोस के साथ अपडेट किया गया नया डेटा देख सकता हूं। लेकिन मूल घटक इसे बाल घटक को पास नहीं करता है।

मूल घटक

<template>
<div>
    <p>{{itemData}}</p>
    <child v-bind:propsData="itemData"/>
</div>
</template>

<script>

import Child from './Child.vue'

export default {

  components: {
    Child,
  },

  data(){
    return {
      itemData: {
          title : 'OLD TITLE'
      }
    }
  },

  async created() {
    this.itemData = await this.$axios.get("/rest/getItem/");
    this.itemData = this.itemData.data;
  },

}
</script>

चाइल्ड कंपोनेंट

<template>
    <div class="child">
        <li>{{title}}</li>
    </div>
</template>

<script>
export default {
    props: {
      propsData: {
        type: Object
      }
    },

    data(){
        return{
            title: this.propsData.title
        }
    }, 
}
</script>

वास्तविक परिणाम

{"title" : "NEW TITLE"}

OLD TITLE

अपेक्षित परिणाम

{"title" : "NEW TITLE"}

NEW TITLE
1
LLG 1 जुलाई 2019, 20:04

2 जवाब

सबसे बढ़िया उत्तर

इसके बजाय एक गणना का उपयोग करें

<script>
export default {
    props: {
      propsData: {
        type: Object
      }
    },

    computed(){
        title(){
          return this.$props.propsData.title
        }
    }, 
}
</script>
1
men32z 1 जुलाई 2019, 20:54

आप देख सकते हैं कि कुछ समस्याएं हैं - लेकिन वे केवल वाक्य-विन्यास हैं। विभिन्न आवरणों के साथ प्रयास करें (और पाठ के बदलने की प्रतीक्षा करें - 3s):

Vue.component('my-component', {
  props: ['propsData'],
  template: '<p>{{ propsData.title }}</p>'
})

new Vue({
  el: "#app",
  data: {
    itemData: {
      title: 'OLD TITLE'
    }
  },
  mounted() {
    const self = this
    // simulating an async call:
    setTimeout(function() {
      self.itemData.title = 'NEW TITLE'
    }, 3000)
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <my-component v-bind:props-data="itemData" />
</div>
0
muka.gergely 1 जुलाई 2019, 21:04