俺のためのライフマネジメントブログ

良い人生を送るために、生活に関わることを書く

vueのtodoでアップデート処理の書き方

このような画面があったとして、選択した値を更新する処理はこう書けばいい

こう書くと、選ばれた値でnamesの配列からindex番号で検索をかけて、その値に対して、selected.value毎、入力フォームの値を打ち込めば良い。 そうすると、次に更新ボタンを押した時、selected.valueの値も変わっているので、namesでヒットして更新できるようになる。

const UpdateName = () => {
  console.log(selected.value)
  const searchIndex = names.indexOf(selected.value)
  names[searchIndex] = selected.value = `${first.value} ${last.value}`
  console.log("更新完了")
}

            <button @click="UpdateName">更新</button>

欠点としては、これがapiと通信を取る際は、途中で処理を辞めてリクエストを送らないようにする必要がある。 ボタンを押せなくするとか