根据在另一个输入字段中插入的数据更改表单字段的输入答案

【问题标题】：Changing the input of a form field based on the data inserted at another input field根据在另一个输入字段中插入的数据更改表单字段的输入
【发布时间】：2021-09-02 21:53:02
【问题描述】：

我有一个预订应用程序。在这个应用程序中，我有一个用于选择出发城市和到达城市的表格。它是国际唯一的，所以如果我从 Ungaria 中选择一个城市，在我选择到达城市的表单的下一个输入中的推荐城市应该是数据库中除来自 Ungaria 的城市之外的所有城市。我使用 axios 访问数据库，应用程序是使用 NuxtJs 创建的。

我如何才能在第二个输入中获取除第一个输入中选择的城市所在国家/地区以外的所有城市？

这是输入下拉列表的代码：

<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>

我在数据库中的数据看起来像这样

【问题讨论】：

那么，这里的问题是什么？
顺便说一句，如果您使用 Nuxt，您可能应该使用 axios.nuxtjs.org。
和asyncData() 或fetch()（选择一个）作为获取数据的生命周期。 nuxtjs.org/docs/2.x/features/data-fetching
感谢您的补充。我稍微修改了文本:)
你过滤它们到filtered 不是吗？如果是这样，你可以循环它们吗？

标签： javascript forms nuxt.js

【解决方案1】：

这是一种处理从位于父级输入中的变量动态获取某些 API 的简单方法。

test.vue（一页）

<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（组件）

<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>

它是在change事件时触发的，所以你需要在输入中写入，然后点击退出（当然可以细化）。

【讨论】：