上の画像のようなTodolistを作成中です。編集ボタンを押すと内容が編集できるといった仕組みになっています。
上の画像が編集画面です。初期値ですでに入力されていた内容と設定されていた日付が表示されてます。
親コンポーネント(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が子コンポーネントでモーダルウィンドウを表示させるコンポーネントです。
<b-button variant="outlineinfo" @click="testOpenModal(todo)">
編集
</b-button>
上のコードでモーダル画面を発火させる文です。引数にtodoを渡しています。
todoの中には内容と日付などが入っています。
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のなかの値を代入しています。
<show-modal
:id="todoId"
:timelimit="todoTimelimit"
:content="todoContent"
v-if="showContent"
@close="modalClose"
/>
v-bindで先ほど代入してあげた値をshow-modal側に渡しています。
<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>