将underscore.js与vue数组一起使用

Question

我完全是Java脚本，vue和underscore.js的新手。我需要通过用户输入movies和title过滤数组year并显示它。如何在下划线过滤器功能中使用html输入？我应该在脚本的哪个位置放置过滤器功能？

  <div id="app">
<div class="container">
  <form>
    <div class="form-group">
        <label for=inputTitle>Title</label>
        <input type="text" id=inputTitle class="form-control" placeholder="Movie title"/>
    </div>
    <div class="form-group row">
      <label class="col-sm-4 col-form-label" for="inputProductionFrom">Year from:</label>
      <div class="col-sm-8">
          <input type="text" id=inputProductionFrom class="form-control"/>
      </div>
    </div>
    <div class="form-group row">
        <input type="button" class="btn btn-info col-sm-12" value="Szukaj"/>
    </div>
  </form>
  <table class="table-condensed table-hover">
    <thead>
      <tr>
        <th>Title</th>
        <th>Production Year</th>
        <th>Cast</th>
        <th>Genres</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="movie in movies">
        <label>
            <td>{{movie.title}}</td>
            <td>{{movie.year}}</td>
            <td v-for="c in movie.cast">{{c}}</td>
            <td v-for="g in movie.genres">{{g}}</td>
        </label>
      </tr>
    </tbody>
  </table>
</div>

<script type="module">
var app = new Vue({
  el: '#app',
  data: {
    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"]}
      ],
  },
})

编辑：

我现在要在输入中添加一个属性：

<input v-model="stitle" type="text" id=inputTitle class="form-control"/>

并添加计算所得：

        computed: {
        filteredItems() {
          return lista = this.movies.filter(item => {
              return item.title.toLowerCase().indexOf(this.stitle.toLowerCase()) > -1
          })          
        }           
    }

我仍然不知道如何添加多个过滤器参数，也可以按年份进行搜索。

Answer 1

查看此代码段，它将使您了解Compute功能并筛选列

new Vue({
  el: '#app',
  data: () => ({
    search: null,
    column: null,
    items:  [
      {"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"]}
      ],
  }),
  
  computed: {
    cols () {
      return this.items.length >= 1 ? Object.keys(this.items[0]) : []
    },
    rows () {
      if (!this.items.length) {
        return []
      }
      
      return this.items.filter(item => {
        let props = (this.search && this.column) ? [item[this.column]] : Object.values(item)
        
        
        return props.some(prop => !this.search || ((typeof prop === 'string') ? prop.includes(this.search) : prop.toString(10).includes(this.search)))
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<div id="app">
  <div>
  <select v-model="column">
    <option :value="null">No Column Filter</option>
    <option v-for="col in cols" :key="col">{{ col }}</option>
  </select>
  <div class="form-group">
        <label for=inputTitle>Title</label>
        <input type="text" v-model="search" id=inputTitle class="form-control" placeholder="Movie title"/>
    </div>
  
  </div>
  <table>
    <thead>
      <tr>
        <th v-for="col in cols" :key="col">{{ col }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="col in cols" :key="col">{{ row[col] }}</td>
      </tr>
    </tbody>
  </table>
</div>