無理にdata()内でやる必要ないなら以下のような書き方もできるのかなと思いました
const data = [];
for (let i = 10; i < 20; i++) {
data.push("Lname" + i)
data.push("Fname" + i)
}
Vue.createApp({
data() {
return { ...data }
}
})
（Vueで期待されている動作をするかどうかは分かりません😇）
Like!
VueのData関数内の繰り返し処理
Q&AClosed
解決したいこと
Vueの初心者ですが、V-modelでバインドした変数をVueのdata関数内で繰り返し処理で設定したい。
発生している問題・エラー
以下のようにVueのData関数内で値を返す箇所をループ処理を行って、データベースから取得した値を設定したいと思っています。
そのために、whileなどを使って繰り返しで処理を行って（LnamexxやFnamexx）のxx部分を設定したいのですが、何か良い方法はありますでしょうか？
該当するソースコード
Vue.createApp({
data() {
return { Lname10: "" , Fname10: "", Lname11: "" , Fname11: "", Lname20:"",Fname20:""};
}
自分で試したこと
Dataメソッド内で繰り返し処理を行おうと思いましたが、どうしてもできず、仮に出来ない場合は、想定される変数を全て入力しておく必要があるためかなり面倒なので、なんらかの良い方法があると思っているのですが、残念ながらなかなかたどり着けずに書き込みました。
0
3Answer
1
Comments
@helloak50
Questioner配列に入れる事は出来るのですが、それをdata()内に反映させるところがうまくいかないです。もうちょっと試してみます。
やりたいことは、これですかね？
Vue.createApp({
data() {
const obj = {};
for (let i = 10; i <= 20; i++) {
obj["Fname" + i] = "";
obj["Lname" + i] = "";
}
return obj;
}
})
Like!
Comments
@helloak50
Questionerありがとうございます！
最後の 「return obj;」の個所を「return ...obj;」に変更したところ、想定通りの動きが出来ました！- うーん？jsにそのような構文は無いはずですが？
まあ動いたならきっとそちらのプログラムはうまく書けているのでしょう。
dataはメソッドじゃなかった気がします。methodを使って書けば良いと思います。
こんな感じ。
https://www.tutorialsplane.com/vue-js-array-foreach/
あとは役に立つか分からないですが、「vuejs 気をつけるポイント」とか「ベストプラクティス」とか「アンチパターン」とか出てくるところは押さえとくと良いと思います。
Like!
Comments
@helloak50
Questionerありがとうございます。
例として挙げて頂いたものがどこでdata()内に居れているのかがよく分からず、うまくいっておりません。