Changing the input of a form field based on the data inserted at another input field

user_16757416 0
Viewed 85

I have a booking app. In this app I have a form for selecting the city of departure and the city of arrival. It's international only, so if I pick a city from Ungaria, the recommended cities in the next input of the form, where I choose the arrival city, should be all the cities in the database except the ones from Ungaria. I access the database using axios and the app is created using NuxtJs.

How can I get in the second input all the cities except those that are part of the country of which the city selected in the first input is part?

This is the code for the dropdown lists of the inputs:

<template>
  <div class="dropdownList">
    <label class="formLabel">{{ label }}</label>

    <input
      ref="dropdowninput"
      v-if="Object.keys(selectedItem).length === 0"
      v-model.trim="inputValue"
      class="dropdown-input"
      type="text"
      :placeholder="placeholder"
    />

    <div v-else @click="resetItem" class="dropdown-selected">
      {{ selectedItem.name }}
    </div>

    <div v-show="inputValue && apiLoaded" class="dropdown-list">
      <div
        @click="selectItem(item)"
        v-show="itemVisible(item)"
        v-for="item in itemList"
        :key="item.name"
        class="dropdown-item"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      selectedItem: {},
      inputValue: "",
      itemList: [],
      apiLoaded: false,
      apiUrl:
        "***"
    };
  },
  props: ["placeholder", "label"],

  mounted() {
    this.getList();
    this.filteredCities();
  },

  methods: {
    filteredCities() {
      let filtered = this.itemList.filter(res => res.countryCode != "ro");
      return filtered;
    },
    getList() {
      axios.get(this.apiUrl).then(response => {
        this.itemList = response.data;
        this.apiLoaded = true;
      });
    },

    itemVisible(item) {
      let currentName = item.name.toLowerCase();
      let currentInput = this.inputValue.toLowerCase();
      return currentName.includes(currentInput);
    },
    selectItem(theItem) {
      this.selectedItem = theItem;
      this.inputValue = "";
      this.$emit("on-item-selected", theItem);
    },
    resetItem() {
      this.selectedItem = {};
      this.$nextTick(() => this.$refs.dropdowninput.focus());
      this.$emit("on-item-reset");
    }
  }
};
</script>

My data in the database looks something like this

nuxt.js forms javascript
1 Answers

This is a naive and simple way of handling a dynamic fetching on some API from a variable located on the parent's input.

test.vue (a page)

<template>
  <div>
    <p>Here, you can input either 'todos', 'albums' or 'photos' (this one is a bigger query)</p>
    <input v-model.lazy.trim="selectedEntity" type="text" style="border: 2px solid hsl(0, 100%, 50%)" />
    <br />
    <br />

    <child :selected-entity="selectedEntity"></child>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedEntity: '',
    }
  },
}
</script>

Child.vue (component)

<template>
  <div>
    <p>Here are all the available results:</p>
    <hr />
    <div v-for="result in results" :key="result.id">
      {{ result.title }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    selectedEntity: {
      type: String,
      default: 'todos',
    },
  },
  data() {
    return {
      results: [],
    }
  },
  async fetch() {
    this.results = await this.$axios.$get(`https://jsonplaceholder.typicode.com/${this.selectedEntity}`)
  },
  watch: {
    async selectedEntity(newValue) {
      console.log('newValue >>', newValue)
      await this.$fetch()
    },
  },
}
</script>

It is triggered upon change event so you need to write in the input and then, click out of it (this can of course be refined).

user_88165850
Related