質問編集履歴
4
画像の添付
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
エラーは出ないのですが、Form.vueにある`<v-text-field label="追加するタスク" placeholder="タスクを入力してください" v-model="title"></v-text-field>`に入力したものが、List.vueにある、 `<td>{{ todo.title }}</td>`に反映されません。
|
|
6
6
|
|
|
7
7
|
### 発生している問題・エラーメッセージ
|
|
8
|
+
](7485802e54d27cd6d3650e7a38916cc4.png)
|
|
8
9
|
|
|
9
10
|
```
|
|
10
11
|
todoを入力したものが、ブラウザに表示されません。
|
3
gettersメソッドを追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,23 +14,28 @@
|
|
|
14
14
|
store/todos.js
|
|
15
15
|
|
|
16
16
|
```js
|
|
17
|
+
|
|
17
18
|
export const state = () => ({
|
|
18
19
|
todos: [],
|
|
19
|
-
title:
|
|
20
|
+
title: '',
|
|
20
21
|
})
|
|
21
22
|
|
|
22
23
|
export const mutations = {
|
|
23
24
|
addTodo: function(state, title) {
|
|
24
|
-
if (!state.title.length) {
|
|
25
|
-
return;
|
|
26
|
-
}
|
|
27
25
|
state.todos.push({
|
|
28
26
|
title: title,
|
|
29
27
|
});
|
|
30
28
|
console.log(title)
|
|
31
|
-
state.title = "";
|
|
32
29
|
}
|
|
33
30
|
}
|
|
31
|
+
|
|
32
|
+
export const getters = {
|
|
33
|
+
title: function(state) {
|
|
34
|
+
return state.title
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
|
|
34
39
|
```
|
|
35
40
|
components/Form.vue
|
|
36
41
|
```vue
|
|
@@ -87,9 +92,9 @@
|
|
|
87
92
|
</tr>
|
|
88
93
|
</thead>
|
|
89
94
|
<tbody>
|
|
90
|
-
<tr v-for="todo in todos" v-bind:key="todo.id">
|
|
95
|
+
<tr v-for="(todo, index) in todos" v-bind:key="todo.id">
|
|
91
96
|
<td>{{ todo.id }}</td>
|
|
92
|
-
<td>{{
|
|
97
|
+
<td>{{ title }}</td>
|
|
93
98
|
<td>{{ todo.deadline }}</td>
|
|
94
99
|
<td ><v-icon>mdi-delete</v-icon></td>
|
|
95
100
|
<td>
|
|
@@ -102,15 +107,16 @@
|
|
|
102
107
|
</template>
|
|
103
108
|
|
|
104
109
|
<script>
|
|
105
|
-
import {
|
|
110
|
+
import {mapGetters} from 'vuex';
|
|
106
111
|
export default {
|
|
112
|
+
computed: {
|
|
113
|
+
todos() {
|
|
114
|
+
return this.$store.state.todos
|
|
115
|
+
},
|
|
107
|
-
|
|
116
|
+
title() {
|
|
108
|
-
return {
|
|
109
|
-
|
|
117
|
+
return this.$store.getters.title
|
|
110
118
|
}
|
|
111
119
|
},
|
|
112
|
-
computed:
|
|
113
|
-
mapState(['todos'])
|
|
114
120
|
}
|
|
115
121
|
</script>
|
|
116
122
|
```
|
2
LIst.vueにmapStateを追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -86,29 +86,31 @@
|
|
|
86
86
|
<th>期限</th>
|
|
87
87
|
</tr>
|
|
88
88
|
</thead>
|
|
89
|
-
<
|
|
89
|
+
<tbody>
|
|
90
|
-
<tr v-for="
|
|
90
|
+
<tr v-for="todo in todos" v-bind:key="todo.id">
|
|
91
91
|
<td>{{ todo.id }}</td>
|
|
92
92
|
<td>{{ todo.title }}</td>
|
|
93
93
|
<td>{{ todo.deadline }}</td>
|
|
94
|
-
<td
|
|
94
|
+
<td ><v-icon>mdi-delete</v-icon></td>
|
|
95
|
-
<td
|
|
95
|
+
<td>
|
|
96
96
|
<v-icon>mdi-account-edit</v-icon>
|
|
97
97
|
</td>
|
|
98
98
|
</tr>
|
|
99
|
-
</
|
|
99
|
+
</tbody>
|
|
100
100
|
</v-simple-table>
|
|
101
101
|
</v-row>
|
|
102
102
|
</template>
|
|
103
103
|
|
|
104
104
|
<script>
|
|
105
|
+
import {mapState} from 'vuex';
|
|
105
106
|
export default {
|
|
106
107
|
data() {
|
|
107
108
|
return {
|
|
108
|
-
todos: [],
|
|
109
109
|
title: ""
|
|
110
110
|
}
|
|
111
111
|
},
|
|
112
|
+
computed:
|
|
113
|
+
mapState(['todos'])
|
|
112
114
|
}
|
|
113
115
|
</script>
|
|
114
116
|
```
|
1
前提のところ情報を足しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
nuxt.jsを使ってtodoアプリを作っています。
|
|
4
|
-
エラーは出ないのですが、打った内容が反映されません。
|
|
5
4
|
|
|
5
|
+
エラーは出ないのですが、Form.vueにある`<v-text-field label="追加するタスク" placeholder="タスクを入力してください" v-model="title"></v-text-field>`に入力したものが、List.vueにある、 `<td>{{ todo.title }}</td>`に反映されません。
|
|
6
|
+
|
|
6
7
|
### 発生している問題・エラーメッセージ
|
|
7
8
|
|
|
8
9
|
```
|
|
9
|
-
todo
|
|
10
|
+
todoを入力したものが、ブラウザに表示されません。
|
|
10
11
|
```
|
|
11
12
|
|
|
12
13
|
### 該当のソースコード
|