Question

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

我在顶部有一个按钮，点击时应该只显示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>

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调用的解析中，那么您的示例将起作用，但这不是一个在真正动态环境中工作的解决方案。

每次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

如何将List.JS与Vue + Axios一起使用？

1 个答案: