Vue эквивалент {{content? .Body}} интерполяции

Question

В angular мы можем сделать что-то вроде {{content?.body}}, и оно будет отображать тело контента, если оно существует в ваших данных.

Кажется, это не работает в Vue. Есть ли способ добиться этого, или я должен проверить вручную.

Answer 1

Этот синтаксис не существует в vue.js и, вероятно, никогда не будет существовать в соответствии с создателем Vue.js ( см. Этот пост )

Однако вы можете использовать get из lodash в сочетании с вычисляемым свойством для имитации этого поведения:

computed: {
   nestedProperty() {
     return get(this, 'here.is.my.nested.property')
   }
} 

Но, возможно, самый простой способ - просто добавить директиву v-if в шаблон, чтобы проверить, существует ли свойство

Answer 2

Полагаю, вы ищете подход, аналогичный дополнительному развертыванию от swift или оператора безопасного вызова от kotlin. Ни JS, ни Vue.js не поддерживают это.

Ваша самая безопасная ставка - использовать v-if на всей цепочке

<span v-if=“content && content.body”>
  {{content.body}}
</span>

Answer 3

В Vue вы можете использовать директиву v-if . Например;

 <div v-if="content.body">
   {{content.body}}
 </div>

Подробнее см. На Официальные документы Vue