Javascript 如何将List.JS与Vue+；Axios？

我以前成功地使用过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>

---

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

featureList

后进行调用并填充数据

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

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

你在做生意

值得注意的是，通过使用

computed

过滤数据，您可以获得相同的效果，并且不需要外部库

---

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

featureList

后进行调用并填充数据

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

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

你在做生意

值得注意的是，通过使用

computed

过滤数据，您可以获得相同的效果，并且不需要外部库

---

不能以这种方式混合使用jQuery和Vue。谢谢你。我得好好考虑一下。如果我使用类似于把手的东西来构建循环的模板，这种分离是否也适用？您不能以这种方式混合使用jQuery和Vue。谢谢你。我得好好考虑一下。如果我用把手之类的东西来做这个环的模板，这种分离会适用吗？