Vue JS не показывает <p>, если свойство не определено

Question

У меня есть разметка на моем шаблоне:

<div class="locButton" v-for="location in locResult.slice(0, 4)">
  <h5>{{ location.legal_name }}</h5>
  <p>{{ location.address1 }}<p>
  <p v-if="location.address2 !== undefined">{{ location.address2 }}</p>
  <p>{{ location.pri_phone }}</p>
</div>

Но в результате элемент по-прежнему печатается на DOM следующим образом:

<div class="locButton">
   <h5>Name</h5> 
   <p>Address1</p>
   <p></p><!----> 
   <p>Phone</p>
</div>

Что мне делать с v-if, чтобы не выводил тег html <p> вообще, если это свойство не определено или пусто?

Answer 1

Проблема очень проста: вы не закрыли тег p <p>{{ location.address1 }}<p>, поэтому браузер закрывает тег p location.address1 и открывает пустой <p></p>, затем Vue рендерит <!---->, потому что location.address2 не определен.Еще одна оптимизация, которую мы можем реализовать - здесь <p v-if="location.address2 !== undefined">.Нам не нужно сравнивать location.address2 с undefined.v-if вернет true, если location.address2 отличается от null или undefiend.Проверьте фрагмент ниже:

var app = new Vue({
  el: '#app',
  data: {
    location: {
      legal_name: 'Name',
      address1: 'Address1',
      pri_phone: 'Phone',
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h5>{{ location.legal_name }}</h5>
  <p>{{ location.address1 }}</p>
  <p v-if="location.address2">{{ location.address2 }}</p>
  <p>{{ location.pri_phone }}</p>
</div>

Answer 2

У вас есть опечатка на вашем первом <p></p> теге

<div class="locButton" v-for="location in locResult.slice(0, 4)">
  <h5>{{ location.legal_name }}</h5>
  <p>{{ location.address1 }}<p> <-- THIS NEED TO BE </p>
  <p v-if="location.address2 !== undefined">{{ location.address2 }}</p>
  <p>{{ location.pri_phone }}</p>
</div>

Answer 3

Просто используйте:

<p v-if="location.address2">{{ location.address2 }}</p>

РЕДАКТИРОВАТЬ:

доказательство того, что это работает:

https://jsfiddle.net/ok2un1qj/

Answer 4

Решения, предложенные в других публикациях, должны неизменно работать, но другой вариант заключается в использовании двойного логического НЕ последовательно для явного принудительного преобразования любого значения в соответствующий логический примитив.

!!location.address2 // Enforces boolean value -> True if it contains a value, false otherwise

Демо

new Vue({
  el: '#app',

  data() {
    return {
      location: {
        address1: 'Some address',
        address2: undefined
      }
    }
  },

  methods: {
    addAddress2() {
      this.location.address2 = 'Address 2';
    }
  }
})

#app>p {
  background-color: lavender;
  padding: 3px;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p>{{ location.address1 }}</p>
  <p v-if="!!location.address2">{{ location.address2 }}</p>

  <button @click="addAddress2">Add address 2</button>
</div>

Answer 5

попробуйте изменить

<p v-if="location.address2 !== undefined">{{ location.address2 }}</p>

на

<p v-if="location.address2">{{ location.address2 }}</p>