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

【问题标题】：How to use List.JS with Vue + Axios?如何在 Vue + Axios 中使用 List.JS？
【发布时间】：2018-07-23 02:19:43
【问题描述】：

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

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

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

这可能与列表元素不是预渲染/静态 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>

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;
});

【问题讨论】：

您不能以这种方式混合使用 jQuery 和 Vue。 stackoverflow.com/a/43255516/392102
谢谢。我将不得不考虑更多。如果我使用车把之类的东西来模板化该循环，这种分离是否也适用？

标签： javascript jquery html vue.js list.js

【解决方案1】：

正如您所怀疑的，如果 DOM 发生不可预测的变化，List.js 将无法正常工作。在这种情况下，axios 会在（空）List 被读入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

【讨论】：