質問編集履歴

1

補足

2021/08/27 10:51

投稿

Hayato1201
Hayato1201

スコア231

test CHANGED
File without changes
test CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  <div v-for="h in hoge" :key="h">
34
34
 
35
-          <button class="edit-button" @click="edit()">編集</button>
35
+          <button class="edit-button" @click="edit(id)">編集</button>
36
36
 
37
37
    </div>
38
38
 
@@ -81,3 +81,81 @@
81
81
 
82
82
 
83
83
  こちら解決できる方いましたらお手数ですがご教示いただけますと幸いです。
84
+
85
+
86
+
87
+
88
+
89
+ ------------------------------------
90
+
91
+ 補足でsetup全体を載せます。メソッドの中身など関係ない部分は一部省略します。
92
+
93
+
94
+
95
+ ```js
96
+
97
+ setup() {
98
+
99
+ const router = useRouter()
100
+
101
+ const store = useStore()
102
+
103
+ const hoge = ref(null)
104
+
105
+
106
+
107
+ onMounted(async () => {
108
+
109
+ const response = await client.getHoge()
110
+
111
+ hoge.value = response.data.hoge
112
+
113
+ })
114
+
115
+
116
+
117
+ const edit = (id) => {
118
+
119
+ console.log("goEdit -> id", id)
120
+
121
+ store.commit('huga/hugaEdit', id)
122
+
123
+ router.push({ name: 'EditPage'})
124
+
125
+ }
126
+
127
+
128
+
129
+ return {
130
+
131
+ hoge,
132
+
133
+ edit
134
+
135
+ }
136
+
137
+ }
138
+
139
+ ```
140
+
141
+
142
+
143
+ ただ、これ一応解決していて、下記のようにテスト側で
144
+
145
+ wrapper.find(".edit-button").trigger("click")
146
+
147
+ の前に下記のように一瞬スリープを入れるとdomが更新されるようでした。
148
+
149
+ しかしなぜこのようにラグがあるのでしょうか・・・
150
+
151
+ vmの値が更新される→DOM更新となると思うのですが、sleepしないとvmが更新されているのにdomが更新されないというのも変な気がします・・・
152
+
153
+ ```js
154
+
155
+ const _sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
156
+
157
+ await _sleep(1);
158
+
159
+ wrapper.find(".edit-button").trigger("click")
160
+
161
+ ```