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

Question

Yes me again!

This is my project

I want to pull the data from the json file when I fill in the required fields and press the button.

For example, let's write the developer part to the jobs section. then select istanbul as an option and click Find!.

 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

If I understand your issue:

• the view updates on each form change since you bound the card-body repeating div directly to the filtering process, so the "Find!" button isn't used
• you don't consider the city selection

To fix these, bind a model to the city selector, and declare separate variables for the JSON data and for the selected data:

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

and:

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

Then put you JSON data in sourceJobs on creation:

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

Side note: this architecture will not be viable for large JSON data, maybe you should consider filtering data through a call to your back-end API... but that's not the current question.

Now that your form data is bound to data.search and data.city , and that your pool of jobs is stored in data.sourceJobs , you want to have a method (no more computed ) to filter data.sourceJobs and copy the resulting subset in data.selectedJobs :

methods: {
  selectJobs: function () {
    this.selectedJobs = this.sourceJobs
      .filter((job) => {
        return job.cityName === this.city && job.positionName.match(this.search);
      })
  }
}

Finally, call this method when the "Find!" button is clicked:

<button v-on:click="selectJobs">Find!</button>

In case you change you architecture to go for an API call to do the filtering, then you just need to remove that created part and do the API call from within the selectJobs method.

Side, unrelated note: find/found/found (successful result of searching) vs. found/founded/founded (create, build, set a base for something - a city, a company...).