Как мне отфильтровать результаты цикла v-for в VueJS с вычисляемым свойством? - PullRequest
Новая
       13

Как мне отфильтровать результаты цикла v-for в VueJS с вычисляемым свойством?

0 голосов
/ 21 апреля 2019

Я пытаюсь использовать вычисляемое свойство для фильтрации результатов, отображаемых при использовании цикла v-for.Тем не менее, я все еще вижу все бары, которые объявлены в моем файле bars.js в моем приложении.Я ожидал увидеть только один, так как он установлен на «истина».Поэтому, где я пойду не так?Любая помощь приветствуется.

Я следую https://medium.com/devmarketer/how-to-add-conditional-statements-to-v-for-loops-in-vue-js-c0b4d17e7dfd 

<li v-for="bar in bars" :key="bar.id">
    <h2>{{ bar.barName }}</h2>
</li> 


<script>
import bars from "./../data/bars";
export default {
  data() {
    return {
      bars:  bars
    };
  },
  computed: {
      bars: function() {
        return this.default.filter(function(u) {
          return u.newListing
      })
    }
  }
};
</script>

В дополнительном файле с именем bars.js у меня есть следующее: 

export default [
    {
        barName: "Mikes",
        newListing: true,
    },
    {
        barName: "Cheers",
        newListing: false,
    },
    {
        barName: "Biker Bar",
        newListing: false,
    }
];

1 Ответ

2 голосов
/ 21 апреля 2019

В вашем коде два bars, поэтому не ясно, какой шаблон следует использовать. Похоже, он выбирает bars в data. Вы должны переименовать вычисляемое свойство в нечто уникальное, а затем использовать его в шаблоне. Например: 

export default {
    data() {
      return {
        bars:  [/* your bar data goes here */]
      };
    },
    computed: {
        bars_filtered: function() {
          return this.bars.filter(u => u.newListing)
      }
    }
  };

Тогда в вашем шаблоне вы будете зацикливаться на bars_filtered:

v-for="bar in bars_filtered"

...