Vue js 搜索过滤器 - 数据和绑定负载问题答案

【问题标题】：Vue js Search Filter - Data & Binding Load IssuesVue js 搜索过滤器 - 数据和绑定负载问题
【发布时间】：2018-12-09 09:15:25
【问题描述】：

我有一个表单，它当前从外部 JSON 中提取一组数据作为选项列表，我正在尝试合并一个搜索过滤器以在您键入时显示选项。这是我创建的计算代码：

computed: {
            searchedSlots: function() {
              return this.items.filter(function(item) {
                return (
                  (item.shortcode.toLowerCase().match(this.searchTerms.toLowerCase())) ||
                  (item.slots.toLowerCase().match(this.searchTerms.toLowerCase()))
                )
              }.bind(this));
            }
          }

此外，搜索 v-model 输入未显示在 摘要中

这是JSFiddle的表格

以下是表格填写后的外观示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'
    />

    <style>
    input, select, button {
        float:left;
        display:block;
        clear:both;
        min-width:200px;
        margin-bottom: 1rem;
      }

      .maxfee, .summary, p.summaryresult {
        float:left;
        display:block;
        clear:both
      }
    </style>

    <!-- Vue.js CDN -->
    <script src="https://unpkg.com/vue"></script>

</head>

<body>


  <form name="myform" id="deliveryservice">

        <!--<pre>{{ items.shortcode }}</pre>-->

        <!-- Load in dayslots from external JSON file -->
        <input name="dayslot" v-for="item in searchedSlots" v-model.lazy="dayslotv" type="text" placeholder="Enter Day and Delivery Slot" required>

        <select v-model="search">
            <option v-for="item in items" v-bind:value="item.slot">
              {{ item.shortcode }} {{ item.slot }}
            </option>
          </select>

        <select v-model="servicev" required>
          <option selected disabled hidden>Please Select</option>
          <option value="standard">Standard</option>
          <option value="installation">Installation</option>
        </select>

        <!-- Customer adds the max amount they wish to pay -->
        <div class="maxfee">
            <input name="price" v-model.number="pricev" type="currency" placeholder="Max price you will pay" required>
        </div>

        <!-- We then display a summary of the options they chose, before they submit -->
        <div class="summary"><p>Summary:</p></div>
        <p class="summaryresult" style="font-weight:bold;">I would like {{ search.shortcode }} on {{ servicev }} service and pay no more than £{{ pricev }}</p>

        <button type="submit">Submit</button>
    </form>

    <script>
        const app = new Vue({
          el: '#deliveryservice',
          data: {   
            items: [],
            search: '',
            dayslotv: '',
            servicev: '',
            pricev: ''

          },
          created: function() {
            fetch('https://s3.eu-west-2.amazonaws.com/dayslots10/dayslots.json')
              .then(resp => resp.json())
              .then(items => {        
                this.items = items
              })
          },
        });
        </script>

</body>

</html>

【问题讨论】：

检查您的控制台日志。在代码中的其他语法错误中，您需要引用包含连字符的对象属性；未引用的dayslot-v 被解释为dayslot 减去v。
感谢 Daniel，解决了控制台问题与这些空数据对象有关的问题。现在在创建的指令上显示错误“unexpected {”。只是不确定加载该数据的语法，是否需要带有 v-for 的选项
您在computed 之后缺少冒号（firefox 或 safari 中的错误消息比 chrome 更明确地说明了这一点。）这不是 vue 特定的东西，这是普通的旧 javascript语法。
我已经从 JSON 文件中加载了选项作为下一步，只需要合并搜索过滤器代码并在摘要中修复未显示的搜索表达式。

标签： javascript html forms vue.js vuejs2

【解决方案1】：

我修正了一些错误。过滤将在几分钟内完成。

new Vue({
  el: '#deliveryservice',

  data: {
    items: [],
    query: '',
    slot: '',
    service: 'standard',
    price: '0',
    src: 'https://s3.eu-west-2.amazonaws.com/dayslots10/dayslots.json'
  },
  
  methods: {
    setSlot (evt) {
      this.slot = evt.target.value
    }
  },
  
  async created () {
    this.items = await (await fetch(this.src)).json()
    this.slot = this.items[0].slot
  }
})

input, select, button {
  float: left;
  display: block;
  clear: both;
  min-width: 200px;
  margin-bottom: 1rem;
}

.maxfee, .summary, p.summaryresult {
  float: left;
  display: block;
  clear: both
}

<form name="myform" id="deliveryservice">
  <input
    v-model="query"
    type="text"
    placeholder="Enter Day and Delivery Slot"
    required
  >

  <select value="slot" @change="setSlot">
    <option
      v-for="({shortcode, slot}, idx) in items"
      :value="slot"
      :selected="idx === 0"
    >{{ shortcode }} - {{ slot }}</option>
  </select>

  <select v-model="service" required>
    <option value="standard">Standard</option>
    <option value="installation">Installation</option>
  </select>

  <div class="maxfee">
    <input
      v-model.number="price"
      type="number"
      min="0"
      placeholder="Max price you will pay"
      required
    >
  </div>

  <div class="summary">
    <p>Summary:</p>
  </div>
  
  <p class="summaryresult" style="font-weight:bold;">
    I would like
    {{ slot }}
    on
    {{ service }}
    service and pay no more than
    £{{ price }}
  </p>
        
  <button type="submit">Submit</button>
 </form>

<script src="https://unpkg.com/vue"></script>

【讨论】：