小编kid*_*ama的帖子

我正在使用 Vue.js 2。

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

在card-component我可以访问该Card goes here {{card}}部分中的道具。

但是，当我尝试在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>

孩子：

<template> …

我试图将“立即购买”按钮置于屏幕中间，但我无法让它工作。

我创建了 3 个 flex 项目并将按钮添加到中间的 flex 中。然而这也不起作用。

我尝试使用 justify-space-around 和 justify-space-between 但没有运气。

<v-flex xs12>
  <v-layout row >
    <v-flex ></v-flex>
    <v-flex pt-2>
      <v-card>
          <v-btn
            color="pink"
            dark
            absolute
            top
          >
            BUY NOW
          </v-btn>
      </v-card>
    </v-flex>
    <v-flex ></v-flex>
  </v-layout>
</v-flex>

这是codepen的链接

请帮忙。

我需要按钮正好位于中间，如下所示：