使用 v-for 生成多个 select 输入

Question

我拼命地尝试从后端为给定的 JSON 生成多个 select 输入，但我无法使其工作。我得到的 JSON 响应看起来像这样：

{
    "selectData": [
        {
            "id": "ats_2323680",
            "label": "Follow up",
            "value": "option_id_1"
        },
        {
            "id": "ats_2323701",
            "label": "1st Interview, Client",
            "value": "option_id_1"
        },...
    ],
    "optionData": {
        "texts": [
            "Sourced",
            "On hold",
            ...
        ],
        "values": [
            "option_id_1",
            "option_id_2",
        ]
    }
}

我已经尝试了几种方法，最后一次尝试是这样的：

模板：

 <div v-for="select in selectData" :key="select.id">
          <p>{{ select.label }}</p>
          <v-select
            :items="optionData.texts"
            :value="getOptionById(select.value)"
            @input="(id) => updateSelect(select, id)"
          ></v-select>
  </div>

脚本：

<script>
export default {
  data() {
    return {
      selectData: [],
      optionData: {
        values: [],
        texts: [],
      },
    };
  },
  methods: {
    fetchData() {
      const headers = this.authorizationHeader;
      axios
        .get(url,
          {
            headers,
          }
        )
        .then((response) => {
          let data = response.data;
          this.selectData = data.selectData;
          this.optionData = data.optionData;
        })
        .catch((error) => console.log(error));
    },
    updateSelect(select, id) {
      select.value = id;
    },
    getOptionById(id) {
      let i = this.optionData.values.findIndex((x) => x === id);
      return this.optionData.texts[i];
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

我对得到的 JSON 结构也不是很满意。 optionTextId 也被发送的原因是，optionTexts 将使用不同的语言。我对任何建议都很满意。

Answer 1

我想我解决了。我认为这是一个典型的过度思考的案例。

首先我在后端更改了 JSON 结构，如：

{
    "selectData": [
        {
            "id": "ats_2323680",
            "label": "Follow up",
            "text": "Sourced",
        },
        {
            "id": "ats_2323701",
            "label": "1st Interview, Client",
            "text": "Kandidaten nachgefasst",
        },
        ...
    ],
    "optionData": {
        "texts": [
            "Sourced",
            "Kandidaten kontaktiert",
            ...
        ],
        "values": [
            "option_id_1",
            "option_id_2",
            ...
       ]
    }
}

然后我把Vue代码改成了：模板：

<div v-for="select in selectData" :key="select.id">
            <label for="location">{{ select.label }}</label>
            <select id="location" name="location" v-model="select.text">
              <option
                v-for="option in optionData.texts"
                :key="option"
                :value="option"
              >
                {{ option }}
              </option>
            </select>
</div>

脚本：

<script>
export default {
  data() {
    return {
      selectData: [],
      optionData: {
        values: [],
        texts: [],
      },
    };
  },
  methods: {
    fetchData() {
      const headers = this.authorizationHeader;
      axios
        .get(
          url,
          {
            headers,
          }
        )
        .then((response) => {
          let data = response.data;
          this.selectData = data.selectData;
          this.optionData = data.optionData;
        })
        .catch((error) => console.log(error));
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

显然，改变 JSON 结构并使用 v-model 起到了神奇的作用。可能很明显。希望这在某些时候能帮助像我这样迷失的灵魂:)

使用 v-for 生成多个 select 输入

Generate multiple select inputs with v-for

javascript

vue.js

v-for