LoginSignup
@helloak50 (hello hello)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

VueのData関数内の繰り返し処理

Q&A

Closed

HTMLJavaScriptVue.js

解決したいこと

Vueの初心者ですが、V-modelでバインドした変数をVueのdata関数内で繰り返し処理で設定したい。

発生している問題・エラー

以下のようにVueのData関数内で値を返す箇所をループ処理を行って、データベースから取得した値を設定したいと思っています。
そのために、whileなどを使って繰り返しで処理を行って（LnamexxやFnamexx）のxx部分を設定したいのですが、何か良い方法はありますでしょうか？

該当するソースコード

Vue.createApp({
data() {
return { Lname10: "" , Fname10: "", Lname11: "" , Fname11: "", Lname20:"",Fname20:""};
}

自分で試したこと

Dataメソッド内で繰り返し処理を行おうと思いましたが、どうしてもできず、仮に出来ない場合は、想定される変数を全て入力しておく必要があるためかなり面倒なので、なんらかの良い方法があると思っているのですが、残念ながらなかなかたどり着けずに書き込みました。

0 likes

3Answer

hariNEzuMI928
@hariNEzuMI928

無理にdata()内でやる必要ないなら以下のような書き方もできるのかなと思いました

const data = [];

for (let i = 10; i < 20; i++) {
  data.push("Lname" + i)
  data.push("Fname" + i)
}

Vue.createApp({
  data() {
    return { ...data }
  }
})

（Vueで期待されている動作をするかどうかは分かりません😇）

1Like

Comments

  1. @helloak50

    Questioner

    配列に入れる事は出来るのですが、それをdata()内に反映させるところがうまくいかないです。もうちょっと試してみます。
ota-meshi
@ota-meshi

やりたいことは、これですかね？

Vue.createApp({
  data() {
    const obj = {};
    for (let i = 10; i <= 20; i++) {
      obj["Fname" + i] = "";
      obj["Lname" + i] = "";
    }
    return obj;
  }
})

1Like

Comments

  1. @helloak50

    Questioner

    ありがとうございます！
    最後の 「return obj;」の個所を「return ...obj;」に変更したところ、想定通りの動きが出来ました！

  2. @ota-meshi

    うーん？jsにそのような構文は無いはずですが？
    まあ動いたならきっとそちらのプログラムはうまく書けているのでしょう。
miyamotok0105
@miyamotok0105

dataはメソッドじゃなかった気がします。methodを使って書けば良いと思います。
こんな感じ。
https://www.tutorialsplane.com/vue-js-array-foreach/

あとは役に立つか分からないですが、「vuejs 気をつけるポイント」とか「ベストプラクティス」とか「アンチパターン」とか出てくるところは押さえとくと良いと思います。

0Like

Comments

  1. @helloak50

    Questioner

    ありがとうございます。
    例として挙げて頂いたものがどこでdata()内に居れているのかがよく分からず、うまくいっておりません。

Your answer might help someone💌

LoginSign Up