[用underscore.js过滤js数组

Question

我是Java脚本的新手，完全不在前端。我在如何在html模板中显示过滤后的数组时遇到问题。我所拥有的是：

 <form>
    <div class="form-group">
        <input v-model="stitle" type="text" id=inputTitle/>
    </div>
    <div class="form-group">
      <input v-model="scast" type="text" id="inputCast"/>
    </div>
    <div class="form-group row">
        <input @click="messageFiltering" type="button" class="btn btn-info col-sm-12" value="Szukaj"/>
    </div>
  </form>

  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Production Year</th>
        <th>Cast</th>
        <th>Genres</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="movie in messageFiltering">
            <td>{{movie.title}}</td>
            <td>{{movie.year}}</td>
            <td>{{movie.cast.toString()}}</td>
            <td>{{movie.genres.toString()}}</td>
      </tr>
    </tbody>
  </table>

还有我的剧本：

  <script type="module">
var app = new Vue({
  el: '#app',
  data: {
    stitle: '',
    syearfrom: '',
    syearto: '',
    scast: '',
    movies: [
      {"title":"Chained for Life","year":1951,"cast":["Hilton Twins"],"genres":[]},
      {"title":"Cheese Chasers","year":1951,"cast":["Looney Tunes"],"genres":["Animated"]},
      {"title":"Chicago Calling","year":1951,"cast":["Dan Duryea","Mary Anderson"],"genres":["Noir"]},
      {"title":"China Corsair","year":1951,"cast":["Jon Hall","Ernest Borgnine"],"genres":["Adventure"]},
      {"title":"So This Is Paris","year":1955,"cast":["Tony Curtis","Gloria DeHaven"],"genres":["Musical"]},
      {"title":"Soldier of Fortune","year":1955,"cast":["Clark Gable","Susan Hayward"],"genres":["Drama"]},
      {"title":"Son of Sinbad","year":1955,"cast":["Dale Robertson","Sally Forrest","Vincent Price"],"genres":["Adventure"]},
      {"title":"Southbound Duckling","year":1955,"cast":["Tom and Jerry"],"genres":["Animated"]},
      {"title":"Special Delivery","year":1955,"cast":["Joseph Cotten","Eva Bartok"],"genres":["Comedy"]}
      ],
  },

    methods: {
        messageFiltering() {
            let collection = _.filter(movies, function (element) {
                return element.year.toString().toLowerCase().indexOf(this.syearfrom.toString().toLowerCase()) != -1;
            });

            collection = _.filter(collection, function (element) {
                return element.title.toString().toLowerCase().indexOf(this.stitle.toString().toLowerCase()) != -1;
            });

            collection = _.filter(collection, function (element) {
                return element.cast.toString().toLowerCase().indexOf(this.scast.toLowerCase().toLowerCase()) != -1;
            });
            return collection;
        }
    }
})

我想通过用户输入从表中的表单显示由messageFiltering（）过滤的电影阵列，但是我不知道如何连接它。按钮@click事件是否正常？

Answer 1

我不确定您要完成什么，只是先缩短代码。其次，此基本过滤器不需要lodash，可以使用默认的filter执行此任务。也似乎有多个toLowerCase（）而不是toString（）。toLowerCase（）

collection = _.filter(collection, function (element) {
                return element.cast.toString().toLowerCase().indexOf(this.scast.toString().toLowerCase()) != -1;
            });
            return collection;

也许这对您有帮助，否则请编辑问题，以便我们可以更好地理解您想要完成的工作，而不是多余的代码。

只需重构您的代码方法

messageFiltering() {
            return movies.filter(movies, function (element) {
                return element.year.toString().toLowerCase().indexOf(this.syearfrom.toString().toLowerCase()) != -1 && element.title.toString().toLowerCase().indexOf(this.stitle.toString().toLowerCase()) != -1 && element.cast.toString().toLowerCase().indexOf(this.scast.toStringe().toLowerCase()) != -1;
            });
        }

编辑：尝试更新此行

<input v-on:click="messageFiltering" type="button" class="btn btn-info col-sm-12" value="Szukaj"/>

Ref