質問編集履歴

1

henkou

2019/01/09 07:13

投稿

tokuwgawa
tokuwgawa

スコア45

test CHANGED
File without changes
test CHANGED
@@ -31,3 +31,141 @@
31
31
  })
32
32
 
33
33
  ```
34
+
35
+
36
+
37
+ #試したこと
38
+
39
+ 算出setter関数使用
40
+
41
+ #失敗理由
42
+
43
+ ######結局参照元がstoreのstateだった為v-modelで直接値を書き換えていることになっていた
44
+
45
+ ```
46
+
47
+ <template>
48
+
49
+ <div>
50
+
51
+ <div v-for="image in test">
52
+
53
+ <el-input type="text" v-model="image"></el-input>
54
+
55
+ </div>
56
+
57
+ </div>
58
+
59
+ </template>
60
+
61
+
62
+
63
+ <script>
64
+
65
+ export default {
66
+
67
+ computed: {
68
+
69
+ test: {
70
+
71
+ get() {
72
+
73
+ return this.$store.state.test.value.filter(function (test) {
74
+
75
+ if(test.type === 'hoge') {
76
+
77
+ return test
78
+
79
+ }
80
+
81
+ })
82
+
83
+ },
84
+
85
+ set(newVal) {
86
+
87
+      //storeのmutateでstate更新関数
88
+
89
+ this.$store.dispatch('creative/doUpdateValue', newVal)
90
+
91
+ }
92
+
93
+ }
94
+
95
+ }
96
+
97
+ }
98
+
99
+ </script>
100
+
101
+ ```
102
+
103
+ 関数内部で変数を作りそこに`push`していく
104
+
105
+ ###失敗理由
106
+
107
+ ######pushで値を入れていったのだが、代入ではなく参照という形で追加されていた為
108
+
109
+ ```
110
+
111
+ <template>
112
+
113
+ <div>
114
+
115
+ <div v-for="image in test">
116
+
117
+ <el-input type="text" v-model="image"></el-input>
118
+
119
+ </div>
120
+
121
+ </div>
122
+
123
+ </template>
124
+
125
+
126
+
127
+ <script>
128
+
129
+ export default {
130
+
131
+ computed: {
132
+
133
+ test: {
134
+
135
+ get() {
136
+
137
+ let tests = []
138
+
139
+ return this.$store.state.test.value.filter(function (test) {
140
+
141
+ if(test.type === 'hoge') {
142
+
143
+ tests.push(test)
144
+
145
+ return tests
146
+
147
+ }
148
+
149
+ })
150
+
151
+ },
152
+
153
+ set(newVal) {
154
+
155
+      //storeのmutateでstate更新関数
156
+
157
+ this.$store.dispatch('creative/doUpdateValue', newVal)
158
+
159
+ }
160
+
161
+ }
162
+
163
+ }
164
+
165
+ }
166
+
167
+ </script>
168
+
169
+
170
+
171
+ ```