質問編集履歴
2
誤字訂正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -60,9 +60,15 @@
|
|
|
60
60
|
|
|
61
61
|
//親コンポーネント(App.vue)
|
|
62
62
|
|
|
63
|
-
<
|
|
63
|
+
<template>
|
|
64
64
|
|
|
65
|
+
<RangeStat v-model="stats"/>
|
|
66
|
+
|
|
65
|
-
・・・
|
|
67
|
+
・・・
|
|
68
|
+
|
|
69
|
+
</template>
|
|
70
|
+
|
|
71
|
+
<script>
|
|
66
72
|
|
|
67
73
|
var stats = [
|
|
68
74
|
|
|
@@ -79,6 +85,8 @@
|
|
|
79
85
|
{ label: 'F', value: 100 }
|
|
80
86
|
|
|
81
87
|
]
|
|
88
|
+
|
|
89
|
+
</script>
|
|
82
90
|
|
|
83
91
|
|
|
84
92
|
|
|
@@ -138,7 +146,7 @@
|
|
|
138
146
|
|
|
139
147
|
propsで渡したデータは本来編集できないと思うのですが、配列だと編集ができ、変更が親まで伝わってくれます。
|
|
140
148
|
|
|
141
|
-
今回の例だとv-modelを使わなくても親コンポーネントから:stats="stats"と指定
|
|
149
|
+
今回の例だとv-modelを使わなくても親コンポーネントから:stats="stats"と指定しpropsで受け取るだけで動きます。
|
|
142
150
|
|
|
143
151
|
それは良くないと思うのでv-modelを使ってみたのですが、先程述べたようにpropsのみで変更できてしまうため、watchのとこは書かなくても動いてしまいます。
|
|
144
152
|
|
1
大きく変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -56,13 +56,11 @@
|
|
|
56
56
|
|
|
57
57
|
(記載に当たり多少省略してます)
|
|
58
58
|
|
|
59
|
-
|
|
60
|
-
|
|
61
59
|
```html
|
|
62
60
|
|
|
63
61
|
//親コンポーネント(App.vue)
|
|
64
62
|
|
|
65
|
-
<RangeStat
|
|
63
|
+
<RangeStat v-model="stats" @click="remove" />
|
|
66
64
|
|
|
67
65
|
・・・
|
|
68
66
|
|
|
@@ -106,7 +104,27 @@
|
|
|
106
104
|
|
|
107
105
|
export default{
|
|
108
106
|
|
|
109
|
-
props:['
|
|
107
|
+
props:['value'],
|
|
108
|
+
|
|
109
|
+
computed: {
|
|
110
|
+
|
|
111
|
+
stats() {
|
|
112
|
+
|
|
113
|
+
return this.value
|
|
114
|
+
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
},
|
|
118
|
+
|
|
119
|
+
watch: {
|
|
120
|
+
|
|
121
|
+
stats(array) {
|
|
122
|
+
|
|
123
|
+
this.$emit('input',array)
|
|
124
|
+
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
},
|
|
110
128
|
|
|
111
129
|
}
|
|
112
130
|
|
|
@@ -114,19 +132,19 @@
|
|
|
114
132
|
|
|
115
133
|
```
|
|
116
134
|
|
|
117
|
-
親から子にpropsでstatsを渡し、子でv-modelを用いて配列の要素を編集しています。
|
|
118
|
-
|
|
119
|
-
propsで渡したデータは編集できないと思うのですが、配列だとできてしまい、動いてしまいます。
|
|
120
|
-
|
|
121
|
-
とはいえ、これはよろしくないと思うので親からstatsを送るときにv-modelを使いたいと考えています。
|
|
122
|
-
|
|
123
|
-
子からは$emit('input',hogehoge)で送ればいいとは思うのですが、配列に対してどう送ればいいのかわかりません。
|
|
124
135
|
|
|
125
136
|
|
|
137
|
+
### 生じている問題
|
|
126
138
|
|
|
127
|
-
|
|
139
|
+
propsで渡したデータは本来編集できないと思うのですが、配列だと編集ができ、変更が親まで伝わってくれます。
|
|
128
140
|
|
|
141
|
+
今回の例だとv-modelを使わなくても親コンポーネントから:stats="stats"と指定するだけで動きます。
|
|
142
|
+
|
|
143
|
+
それは良くないと思うのでv-modelを使ってみたのですが、先程述べたようにpropsのみで変更できてしまうため、watchのとこは書かなくても動いてしまいます。
|
|
144
|
+
|
|
129
|
-
|
|
145
|
+
この実装方法は正しいでしょうか。
|
|
146
|
+
|
|
147
|
+
|
|
130
148
|
|
|
131
149
|
0. 親から子に配列を渡す。
|
|
132
150
|
|
|
@@ -136,6 +154,6 @@
|
|
|
136
154
|
|
|
137
155
|
|
|
138
156
|
|
|
139
|
-
|
|
157
|
+
より良い書き方がありましたら教えてください。
|
|
140
158
|
|
|
141
159
|
よろしくおねがいします。
|