Vuejs 子コンポーネントのplaceholder属性の初期値を親コンポーネント側で入力した値にするには

![スクリーンショット 2020-05-23 11.30.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518141/1ea05666-c028-35d7-3440-1b174224186c.png)

上の画像のようなTodolistを作成中です。編集ボタンを押すと内容が編集できるといった仕組みになっています。

<img width="604" alt="スクリーンショット 2020-05-23 11.45.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518141/8252f0e9-12da-fe9a-b4d7-773a3d60d93d.png">


 上の画像が編集画面です。初期値ですでに入力されていた内容と設定されていた日付が表示されてます。

```vuejs:親コンポーネント(TodoList.vue)
<div>
  <b-container fluid class="bv-example-row">
    <b-row>
      <b-card
        border-variant="secondary"
        footer-border-variant="secondary"
        align="center"
        v-for="todo in todos" 
        :key="todo.id" 
        :content="todo.content"
        :timelimit="todo.timelimit"
      >
      <template v-slot:header>
        <b-button variant="outlineinfo" @click="testOpenModal(todo)">
          編集
        </b-button>
        <b-button variant="outline-danger">
          削除
        </b-button>
        <b-button variant="outline-success">
          完了
        </b-button>
      </template>
      <b-card-text>{{ todo.content }}</b-card-text>
        <template v-slot:footer>
          期限：{{ todo.timelimit }}
        </template>
      </b-card>
    </b-row>
    <transition name="modal">
      <show-modal 
        :id="todoId"
        :timelimit="todoTimelimit"
        :content="todoContent"
        v-if="showContent" 
        @close="modalClose"
      />
    </transition>
  </b-container>
</div>

<script>
import ShowModal from './ShowModal'
export default {
  name: 'todo-list',
  components: {
    ShowModal,
  },
  data () {
    return {
      showModal: false,
      editUserContent: '',
      showContent: false,
      todoItem: ''
    }
  },
    computed: {
    todos () {
      return this.$store.state.todos
	  }
	},
      methods: {
        testOpenModal (todo) {
           this.showContent = true
           this.todoId = todo.id
           this.todoTimelimit = todo.timelimit
           this.todoContent = todo.content
       },
      modalClose () {
         this.showContent = false
       }
   }
}
</script>

```
上記のような配列で回して表示しているTodoListです。show-modalが子コンポーネントでモーダルウィンドウを表示させるコンポーネントです。

```vuejs

<b-button variant="outlineinfo" @click="testOpenModal(todo)">
  編集
</b-button>
```

上のコードでモーダル画面を発火させる文です。引数にtodoを渡しています。
todoの中には内容と日付などが入っています。

```javascript

methods: {
  testOpenModal (todo) {
    // モーダルをウィンドウを表示させる
    this.showContent = true
    // todoIdにtodoのなかのidを代入
    this.todoId = todo.id
    this.todoTimelimit = todo.timelimit
    this.todoContent = todo.content
  },
```

上のコードでモーダルを表示させ```this.xxxx = todo.xx ```でtodoのなかの値を代入しています。

```vuejs

<show-modal 
  :id="todoId"
  :timelimit="todoTimelimit"
  :content="todoContent"
  v-if="showContent" 
  @close="modalClose"
/>
```

v-bindで先ほど代入してあげた値をshow-modal側に渡しています。

```vuejs

<template>
<div>
	<div class="modal-mask">
		<div class="modal-wrapper" @click.self="$emit('close')">
			<div class="modal-container">

				<div class="modal-header">
					{{ id }}:編集
					{{ timelimit }}
				</div>
// v-model="content"でも初期値が入るし:value="content"でも入る
				<div class="modal-form">
					<b-input-group class="mb-2">
					<b-form-input 
						type="text" 
						placeholder="やりたいことを入力してください"
						:value="content"
						@input="onInput"
					>
					</b-form-input>
					<b-form-datepicker 
						class="mb-2" 
						placeholder="何日までに行いますか？"
						:value="timelimit"
					>
					</b-form-datepicker>
				</b-input-group>
				</div>

				<div class="modal-footer">
					<button @click="editTodo">OK</button>
					<button @click="$emit('close')">Close</button>
				</div>
			</div>
		</div>
	</div>
</div>
		
</template>
<script>
export default {
	name: 'show-modal',
	props: ['id', 'timelimit', 'content'],
  deta () {
		return {
			closeModal: false,
			timelimit: '',
			editContent: '',
		}
	},
	methods: {
		editTodo() {
			this.$store.commit ('editTodo',{
				editContent: this.editContent
			})
		},
    onInput(e) {
			this.content = e.target.value
			this.$emit('content', this.content)
		}
	},
	computed: {
		todos () {
			return this.$store.state.todos
		}
	}
}
</script>
```