前提・実現したいこと
Vue.jsにて「あるボタンを押すと、別のボタンの活性非活性を変更する」
という処理を書いています。
ボタンにv-bind:disabled="isPush"をつけて、@clickにてmethodsの関数を呼び、
関数内で「isPush」の真偽値を切り替えているのですが、ボタンの活性状態が変化しません。
発生している問題・エラーメッセージ
chromeのdevツールなどで確認したところ、どうやらdata で宣言している値が変更されていない様です。
console.logでは、変更された値が出力されるのですが、Vue devtools では値が変更されていません。
構成としては、初期読み込み用のmain.js ファイルからindex.html にマウントし、
大枠となるコンポーネントと、自作のナビゲーションコンポーネントを画面構成しています。
様々な記事をあさり、以下の対応をしてみましたがそれでも値が変わりません。
- vue-router の設定(watch されていない可能性を考えて対処)
- $set メソッドの使用(そもそもコンポーネント内でthis.$set を呼ぶと「not a function」エラーとなる)
- $forceUpdate()の使用(上に同じくエラーとなる)
コンポーネント内でthisをconsole.log出力すると、記述した変数や関数などのobject ができているだけで、
VueComponent のオブジェクトになっていない気もします(data ではなくaというキーしかなかったので…)
以下、試行錯誤してぐちゃぐちゃだったので、ある程度編集したサンプルコードです。
必要な箇所以外は、所々省略してます。
webpack.config.js のentryに設定している 「main.js」
Vue.js
1import Vue from 'vue' 2import BootstrapVue from "bootstrap-vue" 3import Vuex from 'vuex' 4import VueRouter from 'vue-router' 5import "bootstrap/dist/css/bootstrap.min.css" 6import "bootstrap-vue/dist/bootstrap-vue.css" 7 8// parent 9import TopPanel from './TopPanel.vue' 10 11// childrens 12import InnerPanel from './component/InnerPanel.vue' 13… 14 15Vue.use(BootstrapVue) 16Vue.use(VueRouter) 17Vue.use(Vuex) 18 19const store = new Vuex.Store({ 20 state: {'…'} 21}); 22 23const router = new VueRouter({ 24 routes: [ 25 { path: '/', component: TopPanel, 26 children: [ 27 { path: '/inner', component: InnerPanel }, 28 ] 29 }, 30 ], 31}); 32 33 34const app = new Vue({ 35 el: '#app', 36 name: 'app', 37 store, 38 router, 39 components: { 40 TopPanel 41 }, 42 template: '<router-view></router-view>' 43})
「TopPanel.vue」
このvueでボタンの活性非活性を試行してみるとdisabledは変わらず、vue devtoolsでも値が変わりませんでした。
Vue.js
1<template> 2 <div id='top-panel' class="content-ground p-0 m-0"> 3 <div class="content-base d-flex p-1 border border-dark"> 4 <ul class="d-inline"> 5 <li><button class="btn btn-dark" v-on:click="pushedBtn(1)" :disabled="isPush1">button 1</button></li> 6 <li><button class="btn btn-dark" v-on:click="pushedBtn(2)" :disabled="isPush2">button 2</button></li> 7 </ul> 8 </div> 9 </div> 10</template> 11 12<script> 13export default { 14 name: 'top-panel', 15 data: () => { 16 return { 17 isPush1: false, 18 isPush2: false, 19 } 20 }, 21 methods: { 22 pushedBtn: (s) => { 23 if(s === 1){ 24 console.log(1 + ' disabled'); 25 this.isPush1 = true; 26 this.isPush2 = false; 27 } else if ( s === 2) { 28 console.log(2 + ' disabled'); 29 this.isPush2 = true; 30 this.isPush1 = false; 31 } 32 console.log(this); 33 } 34 } 35} 36</script>
やりたい事はシンプルなのですが、ここまでハマると思わなかったため、投稿させていただきました。
不足情報あると思いますので、解答に必要そうな事はお聞きください。
よろしくお願いします。
補足情報(FW/ツールのバージョンなど)
Vue 2.9.6
vue-router, vuex, webpack使用
bootstrap, bootstrap-vue も使用
回答2件
あなたの回答
tips
プレビュー