Question

我正在将Element UI库与Vuejs框架一起使用（使用Vue CLI配置）。

我目前有一个嵌套的输入表单，用于获取信息并将其推送到父组件内部的对象数组，但是在与子组件共享此信息时遇到很多麻烦。

我相信使用道具是正确的方法，但是我不确定我是否正确声明了道具。我也为父/子设置了vue-router。

父组件中的表单...

<div>
      <el-dialog title="Create a new space to huddle" :visible.sync="createHuddleVisible" width="1000px" height="200%">
        <el-form :huddle="huddle" :index="index">
          <el-form-item label="Huddle Headline" :label-width="formLabelWidth">
            <el-input v-model="newHuddle" autocomplete="off" placeholder="What should we call this meeting?"></el-input>
          </el-form-item>
          <el-form-item label="Goal" :label-width="formLabelWidth" :autosize="{ minRows: 1, maxRows: 2 }">
            <el-input type="textarea" v-model="newGoal" placeholder="Use this text box to quickly establish the goal of this huddle.">
            </el-input>
          </el-form-item>
          <el-form-item label="Body" :label-width="formLabelWidth">
            <el-input style="white-space: pre-line;" type="textarea" :autosize="{ minRows: 10, maxRows: 15 }" v-model="newBody"></el-input>
          </el-form-item>
          </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="createHuddleVisible = false">Cancel</el-button>
          <el-button type="primary" @click="addHuddle">Confirm</el-button>
        </span>
      </el-dialog>
    </div>

“ addHuddle”方法成功获取所有字符串并创建新对象。

我想使用此处捕获并显示在子组件中的数据。

就目前而言，我一直在尝试将对象值之一打印到卡上作为测试，但是没有运气。空白卡。

<template>
    <el-card class="huddle-box-card" shadow="always">
      {{ huddle[0].goal }}
   </el-card>
</template>

<script>
export default {
    name: 'HuddleSpaceOne',
    props: {
      huddle: {
        type: Object
      },
      index: {
        type: Number
      },
     }
    }
</script>

如何将对象推到另一个Vue组件

0 个答案: