vue.js - 在创建的方法中传递给子组件的属性未定义

我正在使用Vue.js 2。

我在将值传递给子组件作为 Prop 时遇到问题。我正在尝试将card传递给card-component。

在card-component中，我可以在Card goes here {{card}}部分中访问prop。

但是，当我尝试使用created或mounted方法访问它时，它就是undefined。

上级:

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">

                <card-component :card="place.card"></card-component>

            </div>
        </div>
    </div>
</template>

<script>
    import CostComponent from './CostComponent';
    import CardComponent from './CardComponent';

    export default {
        components: {
            CostComponent, CardComponent
        },

        props: ['id'],

        data() {
            return {
                place: []
            }
        },

        created() {
            axios.get('/api/places/' + this.id)
            .then(response => this.place = response.data);
        }
    }
</script>

child :

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <ul class="list-unstyled">

                    Card goes here {{card}}

                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import CardItemComponent from './CardItemComponent';

    export default {
        components: {
            CardItemComponent
        },

        props: ['card'],

        created() {
            console.log(this.card); // undefined
        },

        mounted() {
            console.log(this.card); // undefined
        },
    }
</script>

我做了很多谷歌搜索，但是发现的解决方案都没有解决我的问题。

最佳答案

这纯粹是时间问题。这是发生了什么...

您的父组件已创建。目前，它已为place分配了一个空数组(这也是一个问题，但我稍后会介绍)。异步请求已启动

您的父组件通过其模板创建CardComponent实例

<card-component :card="place.card"></card-component>

在此阶段，place仍然是一个空数组，因此place.card是未定义的

CardComponent created钩子(Hook)运行，记录undefined

会挂载CardComponent并运行其mounted钩子(Hook)(与created相同的日志记录结果)

您的父组件已安装

在此之后的某个时刻，异步请求解析place并将其从一个空数组更改为一个对象，大概是使用card属性。

新的card属性被传递到您的CardComponent中，并以反应方式更新其模板中显示的{{ card }}值。

如果要捕获card属性数据更改的时间，可以使用beforeUpdate挂钩

beforeUpdate () {
  console.log(this.card)
}

演示版

Vue.component('CardComponent', {
  template: '<pre>card = {{ card }}</pre>',
  props: ['card'],
  created () {
    console.log('created:', this.card)
  },
  mounted () {
    console.log('mounted:', this.card)
  },
  beforeUpdate () {
    console.log('beforeUpdate:', this.card)
  }
})
new Vue({
  el: '#app',
  data: {
    place: {}
  },
  created () {
    setTimeout(() => {
      this.place = { card: 'Ace of Spades' }
    }, 2000)
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <card-component :card="place.card" />
</div>

参见https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

如果place是一个对象，则不应将其初始化为数组。另外，如果CardComponent依赖于存在的数据，则可能需要有条件地呈现它。

例如

data () {
  return { place: null }
}

和

<card-component v-if="place" :card="place.card"></card-component>

那么CardComponent将仅在 place具有数据后创建并挂载。

关于vue.js - 在创建的方法中传递给子组件的属性未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54974846/