Question

再次是我！

当我填写必填字段并按下按钮时，我想从json文件中提取数据。

例如，让我们将开发人员部分写入作业部分。然后选择伊斯坦布尔作为选项，然后单击查找！。

var app = new Vue({
  el: "#app",
  data: {
    founded: [],
    search: ""
  },
  created() {
    fetch("job.json")
      .then(res => {
        return res.json();
      })
      .then(res => {
        this.founded = res.items;
      });
  },
  computed:{
      filteredFounded: function(){
          return this.founded.filter((items)=> {
              return items.positionName.match(this.search)
          });
      }
  }
});

    <div class="header">
        <h4>Get Job</h4>
    </div>



    <div id="app" class="nested">
        <div class="card w-50">
            <div class="search">
                <input type="text" class="job" v-model="search" placeholder="Job...">
                <select name="" class="city" id="">
                    <option value="Seçiniz">Seçiniz</option>
                    <option value="İstanbul">İstanbul</option>
                    <option value="Ankara">Ankara</option>
                    <option value="İzmir">İzmir</option>
                    <option value="Çanakkale">Çanakkale</option>
                </select>
            </div>

            <div class="find">
                <button>Find!</button>
            </div>

            <div class="card-body" v-for="items in filteredFounded">
                <h5 class="card-title">{{items.companyName}}</h5>
                <p class="card-text">{{items.positionName | to-uppercase}}</p>
                <p class="card-text">{{items.cityName}}</p>
                <p class="card-text">{{items.townName}}</p>
                <p class="card-text">{{items.distance}}</p>
                <a href="#" class=" btn-primary">Go!</a>
            </div>
        </div>
    </div>

    <script src="script.js"></script>

Answer 1

如果我了解您的问题：

由于您将<article style="background:#0bf;" id="top">WELCOME (wait 3 sec)</article> <article style="background:#f0b;" id="about">ABOUT</article> <article style="background:#b0f;" id="work">OUR WORK</article> <article style="background:#0fb;" id="testimonials">TESTIMONIALS</article> <article style="background:#fb0;" id="contact"> CONTACT <a href="#top">TO TOP</a> </article> <script src="//code.jquery.com/jquery-3.1.0.js"></script>重复card-body直接绑定到过滤过程，因此视图在每次更改表单时都会更新，因此“查找！”按钮未使用
您不考虑城市选择

要解决这些问题，请将模型绑定到城市选择器，然后为JSON数据和所选数据声明单独的变量：

div

和：

<select name="" class="city" id="" v-model="city">

然后在创建时将您的JSON数据放入data: { search: "", sourceJobs: [], selectedJobs: [], city: "" }：

sourceJobs

侧面说明：这种体系结构不适用于大型JSON数据，也许您应该考虑通过调用后端API来过滤数据...但这不是当前的问题。

现在，您的表单数据已绑定到fetch("job.json").then(function (res) { this.sourceJobs = res.json(); });和data.search，并且您的作业池存储在data.city中，您希望有一个方法（不再需要{{1 }}）过滤data.sourceJobs并将结果子集复制到computed中：

data.sourceJobs

最后，在“查找！”时调用此方法。单击按钮：

data.selectedJobs

如果您更改架构以进行API调用进行过滤，则只需删除该methods: { selectJobs: function () { this.selectedJobs = this.sourceJobs .filter((job) => { return job.cityName === this.city && job.positionName.match(this.search); }) } }部分，然后从<button v-on:click="selectJobs">Find!</button>方法中进行API调用。

侧面无关的注释：查找/找到/找到（成功的搜索结果）与找到/找到/找到/建立（创建，建立，设置事物的基础-城市，公司...）。

当我单击按钮以vue在json文件中显示结果时如何显示？

1 个答案: