Как правильно вставить компоненту во vue?

Question

[nurdus]

Добрый день.
Есть компонента:

Vue.component('scores', {
  props: ['scores', 'language', 'localization'],
  template: '#score-info'
});

Есть шаблон (с framework7):

<template id='score-info'>
      <f7-card v-if='scores !== undefined && localization !== undefined && scores.type !== undefined'><!--1-->
        <f7-card-header><b>{{ localization[scores.type][language] }}: {{ scores.rank }}</b></f7-card-header>
        <f7-card-content>
          <f7-grid v-for='value, key in scores' :key='key'>
            <f7-col width="75">{{ localization[key][language] }}:</f7-col>
            <f7-col width="25">{{ value }}</f7-col>
          </f7-grid>
        </f7-card-content>
      </f7-card>
    </template>

Использование:

<scores :scores='scores.week' :language='language' :localization='localization'></scores>

Собственно вопрос: как (и вообще возможно ли) убрать в строчке (1) выражение: v-if='scores !== undefined && localization !== undefined && scores.type !== undefined' ?!
Если его просто удалить возникают ошибки (не информативные): Cannot find element: #score-info. Template element not found or is empty: #score-info. Failed to mount component: template or render function not defined. (я понимаю, почему возникает ошибка, но не пойму как правильно исправить).

Comments

[Сергей delphinpro]

Просто убрать. Как оно может относиться к указанной ошибке, я даже не представляю.

[nurdus]

Предполагаю так: при попытке рендринга root он пытается вычислить scores, которая при инициализации = {}
И если поменять немного код и убрать "v-if='scores !== undefined'":

<template id='score-info'>
      <f7-card v-if='scores !== undefined'>
        <f7-card-header><b>{{ scores.rank }}</b></f7-card-header>
        <f7-card-content>
          <f7-grid v-for='value, key in scores' v-if='key!=="rank" && key!=="type"' :key='key'>
            <f7-col width="75">{{ key }}:</f7-col>
            <f7-col width="25">{{ value }}</f7-col>
          </f7-grid>
        </f7-card-content>
        <f7-card-footer>У вас не осталось "шапок-неведимок"</f7-card-footer>  
      </f7-card>
    </template>

то он начинает ругаться вот так: Error when rendering component : Не удалось получить свойство "rank" ссылки, значение которой не определено или является NULL

Answer 1

[Evgeny Kulakov]

Возможно, что смысл этой строчки заключается в том, чтобы не рендерить компонент, в случае отсутствия данных, которые проверяются в этом условии, чтобы как раз избежать ошибок.
Можно убрать эту строчку, но тогда нужно будет вставить проверки ниже, чтобы, например, loaclization существовал, чтобы не было обращения к индексам не существующих элементов и т.д.

Comments

[nurdus]

Т.е. это нормально?! И нет другого способа? (ну разве что попробовать render функцию)

[nurdus]

Получается какая ситуация, что когда этот код находится в основном экземпляре (без выделения в компоненте) всё ОК, а если вынести отдельно, то без проверок никак.

[Evgeny Kulakov]

nurdus, если вы хотите по-любому рендерить компонент, вы можете убрать это условие, сделать computed свойства, в них сделать все проверки, и далее использовать их в шаблоне.

[nurdus]

Ок, спасибо, попробую.

Answer 2

[Александр Гамов]

Смотрите синтаксис. Данная строчка никаких действий не выполняет и никак на работу скрипта в целом влиять не должна ( за исключением своей прямой задачи естественно).
остаться должно просто <f7-card>