как условно показывать только элементы, основанные на статусе в списке vue

Question

У меня есть следующий код Vue (вот скрипка) https://jsfiddle.net/he26tn53/:

<div id="app"></div>

new Vue({
  el: "#app",
  template:`<h2>People:</h2><span @click="showOnlyEnabled = !showOnlyEnable"> toggle enabled</span>
  <ol>
    <li v-for="person in people">
      <label>
        <span>
          {{ person.name }}
        </span>
      </label>
    </li>
  </ol>`,

  data: {
    showOnlyEnabled: false, 
    people: [
      { name: "Joe", isEnabled: false },
      { name: "Jonie", isEnabled: false },
      { name: "Jill", isEnabled: true },    
      { name: "Jack", isEnabled: true },    
      ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

, и я хотел бы, чтобы переключение было включено, чтобы отображались только включенные пользователи.Я бы предпочел не делать двух проверок, таких как:

<span v-if="showOnlyEnabled">
   <template v-if="person.isEnabled">
      {{person.name}}
   </template>
</span>
<span v-else>
      {{person.name}}
</span>

Есть ли более краткий способ сделать это?

Answer 1

С https://vuejs.org/v2/guide/list.html#v-for-with-v-if, вы можете использовать как v-for, так и v-if на одном и том же элементе.

Вам просто нужно исправить логическое выражение

<li v-for="person in people" v-if="person.isEnabled || !showOnlyEnabled">

---

В качестве альтернативы используйте вычисляемое свойство и фильтр (с той же логикой, что и выше)

computed: {
  filteredPeople() {
    return this.people.filter(({isEnabled}) => isEnabled || !showOnlyEnabled)
  }
}

и

<li v-for="person in filteredPeople">