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

Question

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

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

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

这是否与列表元素不是预渲染/静态 html 而是使用 vue.js 注入(inject)这一事实有关？

https://jsfiddle.net/nolaandy/hw2mheem/

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 在(空)List 被读入 featureList 后进行调用并填充数据。

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

一个custom directive每次 DOM 更新时都会被调用，因此您可以一致地应用您的调整。以下是使用 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>

你就开始做生意了。

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

Updated fiddle