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

【问题标题】：How can I run condition in vue component before run html in the template?在模板中运行 html 之前，如何在 vue 组件中运行条件？
【发布时间】：2018-09-14 19:06:36
【问题描述】：

我的 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 警告]：渲染错误：“TypeError：无法读取属性‘数字’ 未定义”

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

我该如何解决这个问题？

【问题讨论】：

为什么不直接使用 orderDetails？我的意思是，为什么您必须先将 orderDetails 设置为订单？
@anasceym 因为我使用watch
那你为什么用手表？
@anasceym 检查 orderDetail 是否存在
那你为什么不在 html 中使用 orderDetails 呢？您可以使用 v-if 进行检查

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

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

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

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”数组。

【讨论】：

【解决方案2】：

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

【讨论】：