teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問nuxt.jsで打った内容が反映されるようにしたい。

編集履歴

質問編集履歴

4

画像の添付

2020/10/18 01:46

投稿

wattyo
wattyo

スコア10

test CHANGED
File without changes
test CHANGED
@@ -12,6 +12,8 @@
12
12
 
13
13
  ### 発生している問題・エラーメッセージ
14
14
 
15
+ ![![vue.develoopertool](1c2f4517527471c3039aec831a425f3e.png)](7485802e54d27cd6d3650e7a38916cc4.png)
16
+
15
17
 
16
18
 
17
19
  ```

3

gettersメソッドを追加

2020/10/18 01:46

投稿

wattyo
wattyo

スコア10

test CHANGED
File without changes
test CHANGED
@@ -30,11 +30,13 @@
30
30
 
31
31
  ```js
32
32
 
33
+
34
+
33
35
  export const state = () => ({
34
36
 
35
37
  todos: [],
36
38
 
37
- title: ""
39
+ title: '',
38
40
 
39
41
  })
40
42
 
@@ -44,12 +46,6 @@
44
46
 
45
47
  addTodo: function(state, title) {
46
48
 
47
- if (!state.title.length) {
48
-
49
- return;
50
-
51
- }
52
-
53
49
  state.todos.push({
54
50
 
55
51
  title: title,
@@ -58,11 +54,25 @@
58
54
 
59
55
  console.log(title)
60
56
 
61
- state.title = "";
62
-
63
- }
57
+ }
64
-
58
+
65
- }
59
+ }
60
+
61
+
62
+
63
+ export const getters = {
64
+
65
+ title: function(state) {
66
+
67
+ return state.title
68
+
69
+ }
70
+
71
+ }
72
+
73
+
74
+
75
+
66
76
 
67
77
  ```
68
78
 
@@ -176,11 +186,11 @@
176
186
 
177
187
  <tbody>
178
188
 
179
- <tr v-for="todo in todos" v-bind:key="todo.id">
189
+ <tr v-for="(todo, index) in todos" v-bind:key="todo.id">
180
190
 
181
191
  <td>{{ todo.id }}</td>
182
192
 
183
- <td>{{ todo.title }}</td>
193
+ <td>{{ title }}</td>
184
194
 
185
195
  <td>{{ todo.deadline }}</td>
186
196
 
@@ -206,24 +216,26 @@
206
216
 
207
217
  <script>
208
218
 
209
- import {mapState} from 'vuex';
219
+ import {mapGetters} from 'vuex';
210
220
 
211
221
  export default {
212
222
 
223
+ computed: {
224
+
225
+ todos() {
226
+
227
+ return this.$store.state.todos
228
+
229
+ },
230
+
213
- data() {
231
+ title() {
214
-
215
- return {
232
+
216
-
217
- title: ""
233
+ return this.$store.getters.title
218
234
 
219
235
  }
220
236
 
221
237
  },
222
238
 
223
- computed:
224
-
225
- mapState(['todos'])
226
-
227
239
  }
228
240
 
229
241
  </script>

2

LIst.vueにmapStateを追加

2020/10/17 13:46

投稿

wattyo
wattyo

スコア10

test CHANGED
File without changes
test CHANGED
@@ -174,9 +174,9 @@
174
174
 
175
175
  </thead>
176
176
 
177
- <transition-group tag="tbody">
177
+ <tbody>
178
-
178
+
179
- <tr v-for="(todo, index) in todos" v-bind:key="todo.id">
179
+ <tr v-for="todo in todos" v-bind:key="todo.id">
180
180
 
181
181
  <td>{{ todo.id }}</td>
182
182
 
@@ -184,9 +184,9 @@
184
184
 
185
185
  <td>{{ todo.deadline }}</td>
186
186
 
187
- <td @click="removeTask"><v-icon>mdi-delete</v-icon></td>
187
+ <td ><v-icon>mdi-delete</v-icon></td>
188
-
188
+
189
- <td @click="editTask(index)">
189
+ <td>
190
190
 
191
191
  <v-icon>mdi-account-edit</v-icon>
192
192
 
@@ -194,7 +194,7 @@
194
194
 
195
195
  </tr>
196
196
 
197
- </transition-group>
197
+ </tbody>
198
198
 
199
199
  </v-simple-table>
200
200
 
@@ -206,20 +206,24 @@
206
206
 
207
207
  <script>
208
208
 
209
+ import {mapState} from 'vuex';
210
+
209
211
  export default {
210
212
 
211
213
  data() {
212
214
 
213
215
  return {
214
216
 
215
- todos: [],
216
-
217
217
  title: ""
218
218
 
219
219
  }
220
220
 
221
221
  },
222
222
 
223
+ computed:
224
+
225
+ mapState(['todos'])
226
+
223
227
  }
224
228
 
225
229
  </script>

1

前提のところ情報を足しました。

2020/10/17 06:10

投稿

wattyo
wattyo

スコア10

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,9 @@
4
4
 
5
5
  nuxt.jsを使ってtodoアプリを作っています。
6
6
 
7
+
8
+
7
- エラーは出ないのですが、打った内容が反映されません。
9
+ エラーは出ないのですが、Form.vueにある`<v-text-field label="追加するタスク" placeholder="タスクを入力してください" v-model="title"></v-text-field>`に入力したものが、List.vueにある、 `<td>{{ todo.title }}</td>`に反映されません。
8
10
 
9
11
 
10
12
 
@@ -14,7 +16,7 @@
14
16
 
15
17
  ```
16
18
 
17
- todoで打った内容が反映されない
19
+ todoを入力したものが、ブラウザに表示されません。
18
20
 
19
21
  ```
20
22