質問編集履歴

1

サンプルコードを追記しました。

2018/11/26 13:09

投稿

ShinoTatwu
ShinoTatwu

スコア8

test CHANGED
File without changes
test CHANGED
@@ -44,6 +44,192 @@
44
44
 
45
45
 
46
46
 
47
+ 以下、試行錯誤してぐちゃぐちゃだったので、ある程度編集したサンプルコードです。
48
+
49
+ 必要な箇所以外は、所々省略してます。
50
+
51
+
52
+
53
+ webpack.config.js のentryに設定している 「main.js」
54
+
55
+ ```Vue.js
56
+
57
+ import Vue from 'vue'
58
+
59
+ import BootstrapVue from "bootstrap-vue"
60
+
61
+ import Vuex from 'vuex'
62
+
63
+ import VueRouter from 'vue-router'
64
+
65
+ import "bootstrap/dist/css/bootstrap.min.css"
66
+
67
+ import "bootstrap-vue/dist/bootstrap-vue.css"
68
+
69
+
70
+
71
+ // parent
72
+
73
+ import TopPanel from './TopPanel.vue'
74
+
75
+
76
+
77
+ // childrens
78
+
79
+ import InnerPanel from './component/InnerPanel.vue'
80
+
81
+
82
+
83
+
84
+
85
+ Vue.use(BootstrapVue)
86
+
87
+ Vue.use(VueRouter)
88
+
89
+ Vue.use(Vuex)
90
+
91
+
92
+
93
+ const store = new Vuex.Store({
94
+
95
+ state: {'…'}
96
+
97
+ });
98
+
99
+
100
+
101
+ const router = new VueRouter({
102
+
103
+ routes: [
104
+
105
+ { path: '/', component: TopPanel,
106
+
107
+ children: [
108
+
109
+ { path: '/inner', component: InnerPanel },
110
+
111
+ ]
112
+
113
+ },
114
+
115
+ ],
116
+
117
+ });
118
+
119
+
120
+
121
+
122
+
123
+ const app = new Vue({
124
+
125
+ el: '#app',
126
+
127
+ name: 'app',
128
+
129
+ store,
130
+
131
+ router,
132
+
133
+ components: {
134
+
135
+ TopPanel
136
+
137
+ },
138
+
139
+ template: '<router-view></router-view>'
140
+
141
+ })
142
+
143
+ ```
144
+
145
+
146
+
147
+
148
+
149
+
150
+
151
+ 「TopPanel.vue」
152
+
153
+ このvueでボタンの活性非活性を試行してみるとdisabledは変わらず、vue devtoolsでも値が変わりませんでした。
154
+
155
+ ```Vue.js
156
+
157
+ <template>
158
+
159
+ <div id='top-panel' class="content-ground p-0 m-0">
160
+
161
+ <div class="content-base d-flex p-1 border border-dark">
162
+
163
+ <ul class="d-inline">
164
+
165
+ <li><button class="btn btn-dark" v-on:click="pushedBtn(1)" :disabled="isPush1">button 1</button></li>
166
+
167
+ <li><button class="btn btn-dark" v-on:click="pushedBtn(2)" :disabled="isPush2">button 2</button></li>
168
+
169
+ </ul>
170
+
171
+ </div>
172
+
173
+ </div>
174
+
175
+ </template>
176
+
177
+
178
+
179
+ <script>
180
+
181
+ export default {
182
+
183
+ name: 'top-panel',
184
+
185
+ data: () => {
186
+
187
+ return {
188
+
189
+ isPush1: false,
190
+
191
+ isPush2: false,
192
+
193
+ }
194
+
195
+ },
196
+
197
+ methods: {
198
+
199
+ pushedBtn: (s) => {
200
+
201
+ if(s === 1){
202
+
203
+ console.log(1 + ' disabled');
204
+
205
+ this.isPush1 = true;
206
+
207
+ this.isPush2 = false;
208
+
209
+ } else if ( s === 2) {
210
+
211
+ console.log(2 + ' disabled');
212
+
213
+ this.isPush2 = true;
214
+
215
+ this.isPush1 = false;
216
+
217
+ }
218
+
219
+ console.log(this);
220
+
221
+ }
222
+
223
+ }
224
+
225
+ }
226
+
227
+ </script>
228
+
229
+ ```
230
+
231
+
232
+
47
233
  やりたい事はシンプルなのですが、ここまでハマると思わなかったため、投稿させていただきました。
48
234
 
49
235
  不足情報あると思いますので、解答に必要そうな事はお聞きください。