Javascript 使用下划线.js筛选js数组

我不熟悉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>

标题
生产年份
铸造
体裁
{{movie.title}
{{movie.year}
{{movie.cast.toString（）}
{{movie.genres.toString（）}

还有我的剧本：

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

var app=新的Vue({
el:“#应用程序”，
数据：{
针：''，
syearfrom:“”，
syearto:“，
scast:“”，
电影：[
{“标题”：“终身监禁”，“年份”：1951年，“演员阵容”：[“希尔顿双胞胎”]，“流派”：[]}，
{“标题”：“奶酪追逐者”，“年份”：1951年，“演员阵容”：[“鲁尼音乐”]，“流派”：[“动画”]}，
{“标题”：“芝加哥的召唤”，“年份”：1951年，“演员阵容”：[“丹·杜里亚”，“玛丽·安德森]，“流派”：[“黑色”]，
{“标题”：“中国海盗”，“年份”：1951年，“演员阵容”：[“乔恩·霍尔”，“欧内斯特·博格宁]，“流派”：[“冒险”]，
{“标题”：“这就是巴黎”，“年份”：1955年，“演员阵容”：[“托尼·柯蒂斯”，“格洛里亚·德哈文]，“流派”：[“音乐剧”]，
{“标题”：“财富战士”，“年份”：1955年，“演员阵容”：[“克拉克·盖博”，“苏珊·海沃德]，“流派”：[“戏剧”]，
{“标题”：“辛巴德之子”，“年份”：1955年，“演员阵容”：[“戴尔·罗伯逊”，“莎莉·福雷斯”，“文森特·普莱斯]，“流派”：[“冒险”]，
{“标题”：“南行小鸭”，“年份”：1955年，“演员阵容”：[“汤姆和杰瑞”]，“流派”：[“动画”]}，
{“标题”：“特快专递”，“年份”：1955年，“演员阵容”：[“约瑟夫·科顿”，“伊娃·巴托克]，“流派”：[“喜剧”]}
],
},
方法：{
messageFiltering（）{
let collection=\过滤器（电影、函数（元素）{
返回元素.year.toString（）.toLowerCase（）.indexOf（this.syearfrom.toString（）.toLowerCase（））！=-1；
});
collection=\过滤器（集合，函数（元素）{
返回元素.title.toString（）.toLowerCase（）.indexOf（this.stitle.toString（）.toLowerCase（））！=-1；
});
collection=\过滤器（集合，函数（元素）{
返回元素.cast.toString（）.toLowerCase（）.indexOf（this.scast.toLowerCase（）.toLowerCase（））！=-1；
});
回收；
}
}
})

---

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

我不确定您想要完成什么，请先缩短代码。其次，这个基本过滤器不需要lodash，您可以使用默认值来完成此任务。 此外，似乎还有多个toLowerCase（）而不是toString（）。toLowerCase（）

也许这对您有帮助，如果没有，请编辑问题，以便我们能够更好地理解您想要完成的任务，而不是这些冗余代码

只是重构你的代码方法

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"/>

---

我编辑了这个问题，删除了一些html。不幸的是，我不得不使用下划线。我需要的是在html表部分显示messageFiltering（）将提供给我的数组。我将消息添加到click in按钮，但不知道如何将其连接到in表和v-for。或者尝试在方法中插入控制台，或者在那里设置断点并检查是否触发，我一生中从未执行过Vue，这是我对JS的了解您知道如何连接messageFiltering（）的结果吗用它来播放过滤后的电影？

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