vue: Uncaught TypeError: Не могу прочитать свойство ... не определено

Question

Я использую vue@2.1.3 и vue official webpack template для создания приложения.

При разработке локально я часто вижу предупреждение Uncaught TypeError: Cannot read property ... of undefined, но HTML может быть отображен успешно. Тем не менее, HTML не может быть отображен при его развертывании в Netlify с помощью команды npm run build. Поэтому я должен серьезно относиться к этому предупреждению.

Я узнал от here, что это потому, что «данные не полны, когда компонент визуализирован, но, например, загружен из API». и решение состоит в том, чтобы «использовать v-if, чтобы отобразить эту часть шаблона только после того, как данные были загружены».

Есть два вопроса:

1. я пытался обернуть v-if вокруг нескольких операторов, что это порождающего предупреждение, но я думаю, что личное это решение многословное. Есть ли опрятный подход?
2. «предупреждения» в локальном развитии превращаются в «фатальные ошибки» (HTML не может быть визуализирован) в процессе производства. Как сделать их одинаковыми? например оба из них выдают предупреждения или ошибки?

Answer 1

Просто используйте v-if для общего родителя ко всем элементам вашего шаблона, основываясь на этом вызове AJAX, а не на каждом из них.

Так вместо того, чтобы что-то вроде:

<div> 
    <h1 v-if="foo.title">{{ foo.title }}</h1> 
    <p v-if="foo.description">{{ foo.description }}</p> 
</div> 

ли

<div> 
    <template v-if="foo"> 
    <h1>{{ foo.title }}</h1> 
    <p>{{ foo.description }}</p> 
    </template> 
</div> 

Answer 2

вы пытались инициализировать все необходимые вам данные? например если вам нужно abc, вы можете сделать:

new Vue({ 
    data: { 
    a: 1, 
    b: '', 
    c: {} 
    }, 
    created(){ 
    // send a request to get result, and assign the value to a, b, c here 

    } 
}) 

Таким образом, вы не получите любую ошибку xx is undefined

Answer 3

Ребята правы, но я могу добавить что-то. Если есть вероятность, что ваш корневой элемент в состоянии по какой-то причине не определен, рекомендуется использовать что-то вроде этого: v-if='rootElement && rootElement.prop'. Это защитит вас от получения cannot get property prop of undefined, как если бы rootelement не определился, он не будет проходить проверку.