导入的组件和控制台消息

Posted 2023-02-23

【中文标题】导入的组件和控制台消息

【英文标题】：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>

【参考方案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" />