如何在 Vue + Axios 中使用 List.JS？

Question

我之前成功使用过 List.JS，但这次我试图将它与来自 JSON 数据的列表的 Vue.JS 渲染一起使用。

我在顶部有一个按钮，单击该按钮时应该只显示 QB 位置球员。

不幸的是，我什么也没得到，所有列表项都被删除了，而且我在控制台中没有收到错误，所以我不确定如何诊断这个问题。

这是否与列表元素不是 prerendered/static html 而是使用 vue.js 注入的事实有关？

HTML/Vue 模板

<div id='app'>   
<div class="all-players-wrapper" id="all-player-listings">
<button id="filter-qb">QB</button>
<ul class="list">

  <li v-for="player in playerJSON">
    <div class="player-listing">
      <div class="player-left">
        <div class="player-name">{{player.firstName}} {{player.lastName}}</div>  
        <div class="playerPosition">{{ player.Position }}</div>
      </div><!-- end player-left -->
      <div class="player-right">
        <div class="player-grade">GRADE <span>{{player.NFLGrade}}</span></div>
      </div> <!--end player-right -->
    </div>
  </li>

</ul>
</div>
</div>

JS

var vm = new Vue({ 
el: '#app',
data: {
status: 'Combine Particpants',
playerJSON: []
},
created: function () {
this.loadData();

},
methods: {
loadData: function () {
 var self = this;      
 axios.get('https://s3-us-west-2.amazonaws.com/s.cdpn.io/500458/tiny.json').then(function (response) {

   self.playerJSON = response.data
   console.log(response.data);
  })
  .catch(function (error) {
    self.status = 'An error occurred - ' + error
  });
  }
 }  
}); 

var options = {
valueNames: [ 'playerPosition' ]
};

var featureList = new List('all-player-listings', options);

$('#filter-qb').click(function() {
  featureList.filter(function(item) {
    if (item.values().playerPosition == "QB") {
    return true;
  } else {
    return false;
  }
});
 return false;
});

Answer 1

如您所料，如果 DOM 发生不可预测的变化，List.js 将无法正常工作。在这种情况下，axios 在将（空）列表读入 featureList.

后进行调用并填充数据

如果您将列表选择和过滤代码放在 axios 调用的解析中，您的示例会起作用，但这不会成为在真正动态环境中起作用的解决方案。

每次 DOM 更新时都会调用 custom directive，因此您可以一致地应用您的调整。这是使用 List.js:

应用过滤器的指令

  directives: {
    filteredList(el, binding) {
      if (binding.value) {
        const options = {
          valueNames: ['playerPosition']
        };
        const featureList = new List(el, options);

        featureList.filter((item) => item.values().playerPosition === binding.value);
      }
    }
  }

像这样应用它：

<div class="all-players-wrapper" v-filtered-list="filterValue">

添加 filterValue 数据项，并设置按钮：

<button id="filter-qb" @click="() => filterValue='QB'">QB</button>

你在做生意。

值得注意的是，您可以通过使用 computed 来过滤数据来获得相同的效果，并且您不需要外部库。

Updated fiddle

如何在 Vue + Axios 中使用 List.JS？

How to use List.JS with Vue + Axios?

html

javascript

jquery

vue.js

list.js