Question

我的vue组件是这样的：

<template>
    <div id="modal-transaction" class="modal fade" tabindex="-1" role="dialog">
        ...
            <div class="modal-header">
                <h4 class="modal-title">{{order.number}}</h4>
            </div>
        ...
    </div>
</template>
<script>
    export default {
        ...
        data() {
            return {
                order: []
            }
        },
        watch: {
            orderDetail: {
                handler() {
                    this.order = this.orderDetail
                },
                immediate: true
            }
        },
    }
</script>

如果执行了代码，则会出现如下错误：

[Vue警告]：渲染错误：＆＃34; TypeError：无法读取属性＆＃39;数字＆＃39; 未定义＆＃34;

所以我需要watch中的条件。如果this.orderDetail已存在，则在模板中运行html标记。发生错误是因为没有这样的条件。我仍然很困惑，使条件

我该如何解决这个问题？

Answer 1

技术上可以使用beforeUpdate挂钩。看看它： https://vuejs.org/v2/api/#beforeUpdate

Answer 2

首先，您将模板中的数组作为对象进行访问。因此，如果它是一个数组，请使用v-for循环遍历order数组然后访问它。但我认为你不希望在标题中使用for循环。因此，公开一个计算属性，该属性返回订单数组的相应元素，并在模板中使用它。

第二点，您的错误消息。根据{{3}}，模板在数据准备好后加载。但在您的情况下，观察者在模板加载后触发。所以你得到了未定义的错误。你可以做两件事：

1：显示加载程序，直到您的观察者触发并且您的订单数组具有适当的数据。然后你可以使用一个方法从'orderDetails'数组中获取元素。

<template>
<div id="modal-transaction" class="modal fade" tabindex="-1" role="dialog">
    ...           
        <div v-if="orderNumber" class="modal-header">
            <h4 class="modal-title">{{orderNumber}}</h4>
        </div>
        <!-- have some loader -->
        <div v-else class="loader" ></div>
    ...
</div>
</template>

<script>
export default {
    ...
    data() {
        return {
            order: [],
            orderNumber: null
        }
    },
    watch: {
        orderDetail: {
            handler() {
                this.order = this.orderDetail;                   
                this.orderNumber = this.getOrderNumber();
            },
            immediate: true
        }
    },
    methods: {
      getOrderNumber() {
        //process this.orderDetail to get the appropriate orderNumber
      }
    }
</script>

2：如果可能，在触发模态之前准备好'orderDetails'数组。

如何在模板中运行html之前在vue组件中运行条件？

2 个答案: