Question

我刚刚开始了一个新项目，其中VueJS为前端，CakePHP为后端。我的“开发人员”时代可以追溯到很多时候，所以现在我对各种框架和技术（选择和理解）非常迷茫。

到目前为止，从前端VUE获得了JSON，然后在表中使用v-for进行了迭代。该表使用List.js进行一些排序。

HTML代码：

    <table class="table table-sm table-hover table-nowrap card-table">
       <thead>
         <tr>
          <th><a class="list-sort text-muted" data-sort="item-name" href="#">Nombre</a></th>
         </tr>
       </thead>
       <tbody class="list font-size-base" id="userList">
         <tr v-for="userItem in userAll">
           <td><span class="item-name">{{ userItem.username }}</span></td>
         </tr>
       </tbody>
    </table>

Vue：

      el: "#userList",
      data: function () {
        return {
          userAll: []
        }
      },
      beforeMount(){
        this.getUsers();
      },
      methods: {
        async getUsers(){
          const res = await fetch('http://localhost/users/index.json');
          const salida = await res.json();
          this.userAll = salida;
        }
      }
    });

该代码有效（即，用户列表已正确显示在表格中），但是我无法使表格顺序功能正常工作。我现在知道List.js只会看到“ {{userItem.user_department}}”，而不是用户看到的值（抱歉，技术上不太准确）。

我可能可以使用本机Vue过滤功能，但是我担心其他一些JS插件/组件会再次发生这种情况，而我将无法轻松地用Vue替换它们。有没有更简单的方法可以在不放弃所有JS功能的情况下实现这一目标？（我很失落，但是我不知道SSR是否可以成为更清洁的解决方案，或者我只是指出了错误的方向。）

谢谢。

编辑：我添加了整个表格。

使用JS过滤VUE呈现的数据

0 个答案: