Эквивалент Vue для {{содержимого?.body}} интерполяция

#javascript #angular #vue.js

#javascript #угловой #vue.js

Вопрос:

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

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

Ответ №1:

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

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

  

Смотрите больше в официальных документах Vue

Комментарии:

1. Да, в итоге я использовал v-if. Я надеялся, что есть более простой синтаксис

Ответ №2:

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

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

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

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

Комментарии:

1. Да, в итоге я использовал v-if.

Ответ №3:

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

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

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