Zenn
🖥

Nuxt3 / Vue – datalistで選んだ項目を元に 外部APIにfetchリクエストする例 ( @change イベントを検知す

2023/09/01に公開
tech

例

example.vue

<template>
  <div class="main">
    <h1>Todo</h1>
    <div>
      <input v-model="text" list="item" @change="selectTodo(text)" />
      <datalist id="item">
        <div v-for="todo in todoList" :key="todo.value">
          <option :value="todo.value">{{ todo.name }}</option>
        </div>

      </datalist>
    </div>
    <h2>Todo</h2>
    {{ todoItem.title }}
  </div>
</template>
<script>

export default {
  data() {
    return {
      todoList: [{ name: "TODO1", value: 1 }, { name: "TODO2", value: 2 }, { name: "TODO3", value: 3 }],
      todoItem: {}
    }
  },

  methods: {
    async selectTodo(selectedTodo) {
      console.log(selectedTodo);
      const data = await fetch(`https://jsonplaceholder.typicode.com/todos/${selectedTodo}`)
      const json = await data.json()
      this.todoItem = json
    },
  },
}
</script>

動作例

image
image

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-01-21

Discussion