Блог

Мне просто нужна помощь в определении причины, по которой я получаю ошибку в своем вычисляемом свойстве. Ошибка в том, что:

 Error in render: "TypeError: Cannot read property 'length' of undefined"  

Я предполагаю, что, когда я просматриваю activeConnect.nodes, когда я ссылаюсь на этот.узел, он тоже не знает, на какой из них я ссылаюсь? Как мне исправить свой компьютер, чтобы сделать это правильно?

 lt;v-col  v-for="(node, index) in activeConnect.nodes"  :key="index"  gt;  lt;v-card  flex  @click="edit(node)"  gt;  lt;v-card-text  :class="nameClass"  text-no-wrap  v-text="node.content"  /gt;  lt;/v-cardgt;  lt;/v-colgt;  

Вычислено:

 computed: {  nameClass () {  if (this.node.content.length gt; 4) {  return 'name-small'  }  return 'name'  }  }  

SCSS:

 .name-small {  font-size: 12px !important; }  .name {  font-size: 20px !important; }  

Там нет this.node , node это местное название внутри v-for . Существует несколько вариантов решения этой проблемы.

nameClass может быть методом, который получает node в качестве параметра.

Часть шаблона, зависящая от node значения ( v-card ), может быть перемещена в отдельный компонент, который принимается node в качестве опоры и может быть nameClass вычислен.

Простой расчет, как в nameClass , может быть перенесен в шаблон.