导入的组件和控制台消息答案

【问题标题】：Imported component and console message导入的组件和控制台消息
【发布时间】：2021-07-24 18:11:51
【问题描述】：

我对导入组件中的道具有疑问。我使用对话框模板导入了组件，我想从道具中显示文本并且它可以工作，但是我在控制台中有错误。

在控制台我看到这个错误：

[Vue 警告]：渲染错误：“TypeError：无法读取属性 '测试'为空"

但是打开对话框后的值是正确的。

如何解决这个问题，使控制台中的错误不显示？

我的代码：

<template>
  <v-container fluid>
    <v-row>
      <v-col cols="12">
        <v-card class="">
          <TipItem v-for="tip in tips" :key="tip.id" v-on:open-dialog="openTipDetailsDialog(tip)"></TipItem>
        </v-card>
      </v-col>
    </v-row>
    <TipDetailsDialog :dialog="tipDetailsDialog" :tip="tipDetails" v-on:close-dialog="tipDetailsDialog = false"></TipDetailsDialog>
  </v-container>
</template>

<script>
  import TipItem from "../components/TipItem";
  import TipDetailsDialog from "../components/TipDetailsDialog";

  export default {
    name: "Tips",
    components: {
      TipItem,
      TipDetailsDialog
    },
    data: () => ({
      tips: [],
      tipDetailsDialog: false,
      tipDetails: null
    }),
    methods: {
      openTipDetailsDialog(tip) {
        this.tipDetailsDialog = true;
        this.tipDetails = tip;
      }
    }
  };
</script>

提示详情对话框

<template>
  <v-dialog
      :value="dialog"
      fullscreen
      hide-overlay
      transition="dialog-bottom-transition"
      @input="$emit('close-dialog')"
  >
    <v-card class="rounded-0">
      <v-toolbar color="primary">
        <v-toolbar-title>Szczegóły</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon dark @click="$emit('close-dialog')">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-toolbar>
      <v-container>
        <v-row>
          <v-col cols="6">
            <v-card>
              {{ tip.test }}
            </v-card>
          </v-col>
          <v-col cols="6">
            <v-card>
              {{ tip.test2 }}
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-dialog>

</template>

<script>
  export default {
    name: "TipDetailsDialog",
    props: ["dialog", "tip"]
  };
</script>

【问题讨论】：

标签： vue.js vue-component vue-props

【解决方案1】：

tipDetails被初始化为null，然后绑定到 <TipDetailsDialog>.tip，这会导致它尝试渲染 tip.test （其中tip 是null）。

因为TipDetailsDialog 并没有真正呈现任何有意义的东西没有填充的tip，该组件可能应该是仅当tipDetails 为真时才会有条件地呈现：

html <TipDetailsDialog v-if="tipDetails" :tip="tipDetails" />

或者你可以给prop设置一个默认值：

    props: {
        tip: {
            type: String,
            required: false,
            default: () => ""
        },
    },

【讨论】：

【解决方案2】：

tipDetails 被初始化为null，然后绑定到<TipDetailsDialog>.tip，这导致它尝试渲染tip.test（其中tip 是null）。

由于TipDetailsDialog 在没有填充tip 的情况下不会真正呈现任何有意义的东西，因此该组件可能应该仅在tipDetails 为真时有条件地呈现：

<TipDetailsDialog v-if="tipDetails" :tip="tipDetails" />

【讨论】：