导入的组件和控制台消息

Question

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

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

[Vue warn]: Error in render: "TypeError: Cannot read property 'test' of null"

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

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

我的代码：

<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>

Answer 1

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

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

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

Answer 2

tipDetails is initialized as null, and then bound to <TipDetailsDialog>.tip, which causes it to try to render tip.test (where tip is null).

Since TipDetailsDialog doesn't really render anything meaningful without a populated tip, that component should probably be conditionally rendered only when tipDetails is truthy:

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

或者您可以为属性设置一个默认值：

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

导入的组件和控制台消息

Imported component and console message

vue.js

vue-component

vue-props