v-forのデータをpropする。

###わからないこと
Vue.jsでv-forを使用してなおかつ、
そのデータをpropで子コンポーネントに渡したいです。

ですが渡し方がわかりません。
{{}}を使ってみましたがうまく行きませんでした。

###コード
親

Vue
1<template>
2  <div id="app">
3    <v-app>
4      <v-form>
5        <v-container>
6          <v-row v-for="i in items" :key="i" :justify="justify">
7            <v-col cols="12" xs="12" sm="10" md="8" lg="6">
8              <fieldInput placeholder="i"></fieldInput>
9            </v-col>
10          </v-row>
11        </v-container>
12      </v-form>
13    </v-app>
14  </div>
15</template>
16<script src="./login.ts">
17</script>

TypeScript
1import { Component, Vue } from "vue-property-decorator";
2import StackedForm from "@/components/organisms/forms/stackedForm.vue";
3import FieldInput from "@/components/molecules/inputs/fieldInput.vue";
4
5@Component({
6  components: {
7    FieldInput
8  }
9})
10export default class Login extends Vue {
11  justify = "center";
12  items = ["ユーザーネーム", "パスワード", "パスワード確認"];
13}
14

子

Vue
1<template>
2  <v-text-field label="Solo" :placeholder="placeholder" solo></v-text-field>
3</template>
4<script src="./fieldInput.ts">
5import { Component, Vue, Prop } from "vue-property-decorator";
6@Component
7export default class FieldInput extends Vue {
8  test: string = "sss";
9  @Prop()
10  placeholder?: string;
11}
12</script>

行動規範の内容に同意します

回答1件

ベストアンサー

データバインディング構文の記述で送ることができます。

vue
1<template>
2  <v-row v-for="i in items" :key="i" :justify="justify">
3     <v-col cols="12" xs="12" sm="10" md="8" lg="6">
4      <fieldInput :placeholder="i"></fieldInput>
5     </v-col>
6  </v-row>
7</template>

投稿2019/11/12 10:35