teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

BAの転記

2017/02/26 06:37

投稿

Cziffra
Cziffra

スコア10

title CHANGED
File without changes
body CHANGED
@@ -35,4 +35,36 @@
35
35
  listCount: 2
36
36
  }
37
37
  });
38
+ ```
39
+
40
+
41
+
42
+ BAを転記します。
43
+
44
+ ```html
45
+ <ul id=list>
46
+ <li v-for="(sv, i) in saved">
47
+ <select v-model="saved[i]">
48
+ <option v-for="from in froms">{{from}}</option>
49
+ </select>
50
+ </li>
51
+ <li>
52
+ <input type="button" value="+" @click="addNewSaved">
53
+ </li>
54
+ </ul>
55
+ ```
56
+
57
+ ```javascript
58
+ const list = new Vue({
59
+ el: '#list',
60
+ data: {
61
+ froms: ["AAA", "BBB", "CCC", "DDD"],
62
+ saved: ["BBB","CCC"]
63
+ },
64
+ methods: {
65
+ addNewSaved: function () {
66
+ this.saved.push(this.froms[0]);
67
+ }
68
+ }
69
+ });
38
70
  ```

2

環境情報追加

2017/02/26 06:37

投稿

Cziffra
Cziffra

スコア10

title CHANGED
File without changes
body CHANGED
@@ -1,3 +1,5 @@
1
+ Vue.js v2.1.10 環境です。
2
+
1
3
  下記の条件を満たすフロントの実装を行いたくコーディングを行いました。
2
4
 
3
5
  1. fromsはセレクトボックスの選択肢が格納される

1

htmlをシンプルに変更。jsをより多様なケースに対応できるために変更。

2017/02/25 08:50

投稿

Cziffra
Cziffra

スコア10

title CHANGED
File without changes
body CHANGED
@@ -13,14 +13,12 @@
13
13
 
14
14
  ```html
15
15
  <ul id=list>
16
- <div v-for="(n,key) in listCount">
16
+ <li v-for="(n,key) in listCount">
17
- <li>
18
- <select>
17
+ <select>
19
- <option selected v-for="from in froms" v-if="saved.length >= 1 && saved[key].from == from.name">{{from.name}}</option>
18
+ <option selected v-for="from in froms" v-if="saved.length >= 1 && saved[key].from == from.name">{{from.name}}</option>
20
- <option v-else>{{from.name}}</option>
19
+ <option v-else>{{from.name}}</option>
21
- </select>
20
+ </select>
22
- </li>
21
+ </li>
23
- </div>
24
22
  <li>
25
23
  <input type="button" value="+" @click="listCount += 1">
26
24
  </li>
@@ -30,9 +28,9 @@
30
28
  const list = new Vue({
31
29
  el: '#list',
32
30
  data: {
33
- froms: [{"name":"AAA"},{"name":"BBB"}{"name":"CCC"},{"name":"DDD"}]],
31
+ froms: [{"name":"AAA"},{"name":"BBB"},{"name":"CCC"},{"name":"DDD"}],
34
- saved: [{"from":"BBB"}],
32
+ saved: [{"from":"BBB"},{"from":"CCC"}],
35
- listCount: 1
33
+ listCount: 2
36
34
  }
37
35
  });
38
36
  ```