javascript - 单击按钮时如何使用 vue 在 json 文件中显示结果？

Question

又是我!

This is my project

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

例如，让我们将开发人员部分写入作业部分。然后选择 Istanbul 尔作为选项并单击查找!

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

如果我理解您的问题:

• 自从您绑定(bind) card-body 以来，每次表单更改时 View 都会更新重复 div直接进入过滤过程，所以“查找!”按钮未使用
• 你不考虑城市选择

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

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

和:

data: {
  search: "",
  sourceJobs: [],
  selectedJobs: [],
  city: ""
}

然后把你的JSON数据放在sourceJobs中关于创作:

fetch("job.json").then(function (res) {
  this.sourceJobs = res.json();
});

旁注:此架构不适用于大型 JSON 数据，也许您应该考虑通过调用后端 API 来过滤数据……但这不是当前的问题。

现在您的表单数据已绑定(bind)到 data.search和 data.city ，并且您的作业池存储在 data.sourceJobs 中，你想要一个方法(不再是 computed )来过滤 data.sourceJobs并将生成的子集复制到 data.selectedJobs 中:

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 调用来执行过滤，那么您只需删除 created部分并从 selectJobs 中执行 API 调用方法。

侧面，不相关的注释:find/found/found(搜索的成功结果)与 found/founded/founded(创建、构建、为某物设置基础 - 一座城市、一家公司......)。