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

Question

我以前成功地使用过List.JS，但这次我尝试将其用于JSON数据列表的Vue.JS呈现。

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

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

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

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在将(空)列表读入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