如何在Vue组件模板渲染HTML前执行条件判断？

Hey there, let's sort out this issue you're facing. The error you're seeing is almost certainly because your order data property starts as an empty array ([]), but your template tries to access order.number—arrays don't have a number property, so Vue throws an error when it attempts to render that value before orderDetail updates it.

Here are several solid approaches to add condition checks either before or during template rendering:

1. Initialize order as an empty object (not array) #

Since orderDetail is presumably an object with a number property, initializing order as an empty object instead of an array will prevent immediate property access errors. Even if order is empty at first, accessing order.number will just return undefined instead of throwing an error.

Update your data section:

data() {
  return {
    order: {} // Replace empty array with empty object
  }
}

2. Use v-if to conditionally render only when order is valid #

Add a v-if directive to the element containing {{order.number}} to ensure Vue only renders it when order exists and has the number property. This is a safe, explicit way to guard against invalid state.

Modify your template:

<div class="modal-header" v-if="order && order.number">
  <h4 class="modal-title">{{order.number}}</h4>
</div>

For extra rigor, you can explicitly check that order is an object (not an array or null):

<div class="modal-header" v-if="typeof order === 'object' && order !== null && 'number' in order">
  <h4 class="modal-title">{{order.number}}</h4>
</div>

3. Use optional chaining (Vue 3 or Vue 2 with setup) #

If you're using Vue 3, or have set up Babel support for optional chaining in Vue 2, you can use the ?. operator to safely access nested properties. This will return undefined instead of throwing an error if order is invalid or missing the number property.

Update your template:

<h4 class="modal-title">{{order?.number}}</h4>

4. Add validation in your watcher #

Ensure you only assign orderDetail to order if it's a valid object. This prevents order from ever being an invalid state that would break the template.

Adjust your watcher:

watch: {
  orderDetail: {
    handler(newVal) {
      // Validate that newVal is a valid non-array object before assignment
      if (newVal && typeof newVal === 'object' && !Array.isArray(newVal)) {
        this.order = newVal;
      } else {
        // Fallback to empty object to keep template safe
        this.order = {};
      }
    },
    immediate: true
  }
}

Combining approach 1 and 2 is usually the most reliable solution for Vue 2 projects, while optional chaining is a clean option for Vue 3.

内容的提问来源于stack exchange，提问作者moses toh