質問編集履歴
8
UserSortedComponent.vue 変更更新しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -60,8 +60,8 @@
|
|
|
60
60
|
<draggable v-model="users" :options="options">
|
|
61
61
|
<div class="item" v-for="(user,usid) in users" :key="user.sort_id">
|
|
62
62
|
<span> 表示順{{ usid + 1}} 【{{user.name}}】</span>
|
|
63
|
-
<input type="hidden" name="userid" v-bind:userid="
|
|
63
|
+
<input type="hidden" name="userid" v-bind:userid="user.id">
|
|
64
|
-
<input type="hidden" name="sortid" v-bind:sortid="
|
|
64
|
+
<input type="hidden" name="sortid" v-bind:sortid="usid">
|
|
65
65
|
</div>
|
|
66
66
|
</draggable>
|
|
67
67
|
<div class="submit-box">
|
7
タイトル変更、補足追加
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Laravel + Vue.js + vue.draggable 値の
|
|
1
|
+
Laravel + Vue.js + vue.draggable 値の指定方法がわからない
|
body
CHANGED
|
@@ -158,6 +158,12 @@
|
|
|
158
158
|
params.append ('userid', user.id),
|
|
159
159
|
params.append ('sortid', user.sort_id),
|
|
160
160
|
```
|
|
161
|
+
や
|
|
162
|
+
|
|
163
|
+
```
|
|
164
|
+
params.append ('userid', draggable.userid),
|
|
165
|
+
params.append ('sortid', draggable.sort_id),
|
|
166
|
+
```
|
|
161
167
|
としても値が取得できません。
|
|
162
168
|
ChromeプラグインのVueDevToolsで確認したところ、Array[0]となっています。
|
|
163
169
|
|
6
初心者マーク
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -189,4 +189,6 @@
|
|
|
189
189
|
```
|
|
190
190
|
thisが効いていない。機能していない。そのため、「空の値は不可」とSQLエラーが返ってくる。
|
|
191
191
|
|
|
192
|
+
|
|
193
|
+
|
|
192
194
|
初心者ですが、何卒ご教授願います。
|
5
タイトル変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Laravel + Vue.js + vue.draggable
|
|
1
|
+
Laravel + Vue.js + vue.draggable 値の取得方法について
|
body
CHANGED
|
File without changes
|
4
補足情報変更、試したこと追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -112,10 +112,6 @@
|
|
|
112
112
|
this.users = response.data;
|
|
113
113
|
});
|
|
114
114
|
}
|
|
115
|
-
},
|
|
116
|
-
mounted() {
|
|
117
|
-
var self = this;
|
|
118
|
-
axios.get('/users/sorted')
|
|
119
115
|
}
|
|
120
116
|
});
|
|
121
117
|
</script>
|
|
@@ -185,4 +181,12 @@
|
|
|
185
181
|
```
|
|
186
182
|
としても、そもそもuserid,sortidが VueDevToolsに表示されなくなってしまいました。
|
|
187
183
|
|
|
184
|
+
3
|
|
185
|
+
子要素から親要素へ値を渡すことが必要？
|
|
186
|
+
```
|
|
187
|
+
params.append ('userid', this.userid),
|
|
188
|
+
params.append ('sortid', this.sortid),
|
|
189
|
+
```
|
|
190
|
+
thisが効いていない。機能していない。そのため、「空の値は不可」とSQLエラーが返ってくる。
|
|
191
|
+
|
|
188
192
|
初心者ですが、何卒ご教授願います。
|
3
補足情報追加
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Laravel + vue.draggable 入れ替え後の値を取得したい
|
|
1
|
+
Laravel + Vue.js + vue.draggable 入れ替え後の値を取得したい
|
body
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
【環境】
|
|
3
3
|
- PHP7.2
|
|
4
4
|
- Laravel5.6
|
|
5
|
-
- MySQL5.6
|
|
6
5
|
- Vue.js2.9.6
|
|
7
6
|
|
|
8
7
|
【データベース】
|
|
@@ -25,7 +24,7 @@
|
|
|
25
24
|
|2|次郎|2|
|
|
26
25
|
|3|三郎|1|
|
|
27
26
|
|
|
28
|
-
draggableで入れ替えた後に、入れ替え後の値を表示まではできたのですが、その値をinput文に挿入できないでいます。配列の中の値を取得するにはどのようにすればよいのでしょうか。
|
|
27
|
+
vue.draggableで入れ替えた後に、入れ替え後の値を表示まではできたのですが、その値をinput文に挿入できないでいます。配列の中の値を取得するにはどのようにすればよいのでしょうか。
|
|
29
28
|
|
|
30
29
|
### 該当ソースコード
|
|
31
30
|
######sorted.blade.php
|
2
補足情報追記（web.php）
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -124,11 +124,11 @@
|
|
|
124
124
|
#####UserController.php
|
|
125
125
|
```
|
|
126
126
|
//表示画面
|
|
127
|
-
public function userSorted(
|
|
127
|
+
public function userSorted()
|
|
128
128
|
{
|
|
129
129
|
$users = User::orderBy('sort_id', 'asc')->get();
|
|
130
130
|
|
|
131
|
-
return view('users.sorted', ['
|
|
131
|
+
return view('users.sorted', ['users' => $users]);
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
//更新処理
|
|
@@ -142,6 +142,11 @@
|
|
|
142
142
|
return $users;
|
|
143
143
|
}
|
|
144
144
|
```
|
|
145
|
+
#####web.php
|
|
146
|
+
```
|
|
147
|
+
Route::get('users/sorted', 'UserController@userSorted');//順番入れ替え出力
|
|
148
|
+
Route::post('users/sorted_store', 'UserController@userSortedStore');//更新処理
|
|
149
|
+
```
|
|
145
150
|
### 教えていただきたいところ
|
|
146
151
|
・userid , sortidの値が取得をしたい
|
|
147
152
|
・取得したデータを配列へと変換して送信したい
|
1
補足説明の追加
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Laravel + vue.draggable
|
|
1
|
+
Laravel + vue.draggable 入れ替え後の値を取得したい
|
body
CHANGED
|
@@ -5,9 +5,6 @@
|
|
|
5
5
|
- MySQL5.6
|
|
6
6
|
- Vue.js2.9.6
|
|
7
7
|
|
|
8
|
-
【実現したいこと】
|
|
9
|
-
Vue.draggableを使って、入れ替えた順番を送信したい。
|
|
10
|
-
|
|
11
8
|
【データベース】
|
|
12
9
|
**usersテーブル**
|
|
13
10
|
|id|name|sort_id|
|
|
@@ -28,7 +25,29 @@
|
|
|
28
25
|
|2|次郎|2|
|
|
29
26
|
|3|三郎|1|
|
|
30
27
|
|
|
28
|
+
draggableで入れ替えた後に、入れ替え後の値を表示まではできたのですが、その値をinput文に挿入できないでいます。配列の中の値を取得するにはどのようにすればよいのでしょうか。
|
|
29
|
+
|
|
31
30
|
### 該当ソースコード
|
|
31
|
+
######sorted.blade.php
|
|
32
|
+
```
|
|
33
|
+
<div id="us_dnd" class="us_dnd w-100">
|
|
34
|
+
<user-sorted-component v-bind:users="{{ $users }}">
|
|
35
|
+
</user-sorted-component>
|
|
36
|
+
</div>
|
|
37
|
+
```
|
|
38
|
+
######app.js
|
|
39
|
+
```
|
|
40
|
+
require("./bootstrap");
|
|
41
|
+
window.Vue = require("vue");
|
|
42
|
+
|
|
43
|
+
window.axios = require('axios');
|
|
44
|
+
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
|
45
|
+
|
|
46
|
+
Vue.component('user-sorted-component', require("./sorted/UserSortedComponent.vue").default);
|
|
47
|
+
const us_dnd = new Vue({
|
|
48
|
+
el: "#us_dnd",
|
|
49
|
+
})
|
|
50
|
+
```
|
|
32
51
|
######UserSortedComponent.vue
|
|
33
52
|
```
|
|
34
53
|
<!-- template -->
|