Question

简单地说，我有两个组成部分：

父组件，它传递名为“profile”的道具对象
子组件，它接收个人资料道具

配置文件值是这样的对象：

$(function() {

  var $table = $('table');
  $table
    .Tabledit({
      columns: {
        identifier: [0, 'id'],
        hideIdentifier: true,
        editable: [
          [1, 'App Date'],
          [2, 'App Time'],
          [3, 'Service Type', '{"1": "@mdo", "2": "@fat", "3": "@twitter", "4": "@university"}',]
        ]
      }
    })
    .on('click', 'button:not(.tabledit-save-button)', function() {
      // prevent sorting while editing
      $table[0].isUpdating = $(this).closest('td').hasClass('tabledit-edit-mode');
    })
    .find('select[name="Service Type"]').attr('multiple', 'multiple')
    .on('click', 'button.tabledit-save-button', function() {
        // update tablesorter cache
      $table.trigger('update');
    })
});

会发生什么？

子组件完全接收模板中的配置文件值，但似乎无法检索并将其设置为组件数据。

目标是什么？

我想用个人资料电子邮件道具初始化值“email”。

我期待什么？

{
  name: "Something",
  email: "some@thing.com"
}

更新

我没有指定电子邮件是用作模型的数据值。我刚刚尝试删除它，只是在模板中打印电子邮件的值，它也不起作用。

export default {
  props: ["profile"],
  data() {
    return {
      email: this.profile.email
    }
  }
}

更新2

我尝试了几件事，我认为问题是在beforeCreate（）中异步调用API。

Answer 1

您的子组件电子邮件属性应为计算值

<!-- CHILD COMPONENT -->

<template>
  <div>
    {{profile}} <!-- All the fields are passed and available (e.g. profile.email)-->
    {{email}} <!-- Email is not defined -->
  </div>
</template>

<script>

import Auth from "../services/apis/auth";
import DialogSettings from "../components/dialog-settings";

export default {
    name: "dialog-settings",
  props: ["profile"],
  data() {
    return {
    }
  },
  computed: {
    email () {
      return this.profile ? this.profile.email : 'no email yet'
    }
  }
}
</script>

那是因为父组件属性是在渲染子组件之后设置的。＆＃34;数据＆＃34;不是被动的，它在创建组件时设置一次。道具＆＃39;简介＆＃34;因此首先在渲染组件时应该看到{}并且在设置了Auth的响应之后。如果您仍想将其保存在数据中，则可以显示以下子组件：

<dialog-settings ref="dialogSettings" :profile="profile" v-if="profile.email"></dialog-settings>

但我不建议这样做！

Vue：使用不起作用的道具值设置子组件数据

1 个答案: