Vue v-if оператор, чтобы проверить, является ли переменная пустой или нулевой - PullRequest
Новая
       6

Vue v-if оператор, чтобы проверить, является ли переменная пустой или нулевой

1 голос
/ 20 марта 2020

Я пытаюсь использовать оператор v-if для отображения некоторого HTML, только если переменная archiveNote не пуста / пуста. 

<div v-if="archiveNote === null || archiveNote ===''" class="form-check ml-3" id="include-note-div">

Вот как она создается 

export default {
    name: "ConfirmReleaseFilesModal",
    props: {
        archiveName: String,
        archiveNote: String
    },

, который затем передается из этого другого Vue файла 

<confirm-release-files-modal
    v-if="showConfirmReleaseFilesModal"
    @cancel="closeModal"
    @confirmAndEmail="releaseAction"
    @confirmNoEmail="releaseAction"
    :archive-name="archiveName"
    :archive-note ="archiveNote"
>
</confirm-release-files-modal>

Блок HTML все еще показывает, когда archiveNote равен console.log как пустой

Ответы [ 2 ]

2 голосов
/ 20 марта 2020

Если вы хотите показать div, когда archiveNote НЕ пуст, то это будет: 

v-if="archiveNote !== null && archiveNote !== ''"

В противном случае вы говорите Vue показывать его, только если это null или ''. Альтернативный способ сделать это более всесторонне и кратко - с помощью двойной удар : 

v-if="!!archiveNote"

Он оценивает следующее для false:

  • false
  • null
  • undefined
  • 0
  • -0
  • NaN
  • ''

и другие вещи до true. Или вы можете просто сделать: 

v-if="archiveNote"
0 голосов
/ 20 марта 2020

Это может быть вызвано тем, что в родительском компоненте вы присваиваете свои переменные реквизитам с неправильным именем :archive-name="archiveName" вместо :archiveName="archiveName".

...