Как мне при нажатии кнопки показать результаты в файле JSON с VUE?

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

Если я понимаю вашу проблему:

• представление обновляется при каждом изменении формы, поскольку вы связали card-body с повторением div непосредственно с процессом фильтрации, поэтому «Найти!» кнопка не используется
• Вы не считаете выбор города

Чтобы исправить это, свяжите модель с селектором города и объявите отдельные переменные для данных 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 ... но это не текущий вопрос.

Теперь, когда ваши данные формы привязаны к 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);
      })
  }
}

Наконец, вызовите этот метод, когда "Find!" нажата кнопка:

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

Если вы измените свою архитектуру, чтобы выполнить вызов API для фильтрации, вам просто нужно удалить эту часть created и выполнить вызов API из метода selectJobs.

Боковое, несвязанное примечание: найти / найти / найти (успешный результат поиска) и найти / основать / основать (создать, построить, установить базу для чего-либо - город, компания ...).