質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.08%

Vue.js でdata の値が反映されない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 4,798

ShinoTatwu

score 8

 前提・実現したいこと

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」

import Vue from 'vue'
import BootstrapVue from "bootstrap-vue"
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap-vue/dist/bootstrap-vue.css"

// parent
import TopPanel from './TopPanel.vue'

// childrens
import InnerPanel from './component/InnerPanel.vue'
…

Vue.use(BootstrapVue)
Vue.use(VueRouter)
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {'…'}
});

const router = new VueRouter({
  routes: [
    { path: '/', component: TopPanel, 
      children: [
          { path: '/inner', component: InnerPanel },
      ]
    },
  ],
});


const app = new Vue({
  el: '#app',
  name: 'app',
  store,
  router,
  components: {
    TopPanel
  },
  template: '<router-view></router-view>'
})

「TopPanel.vue」
このvueでボタンの活性非活性を試行してみるとdisabledは変わらず、vue devtoolsでも値が変わりませんでした。

<template>
  <div id='top-panel' class="content-ground p-0 m-0">
    <div class="content-base d-flex p-1 border border-dark">
      <ul class="d-inline">
        <li><button class="btn btn-dark" v-on:click="pushedBtn(1)" :disabled="isPush1">button 1</button></li>
        <li><button class="btn btn-dark" v-on:click="pushedBtn(2)" :disabled="isPush2">button 2</button></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'top-panel',
  data: () => {
    return {
      isPush1: false,
      isPush2: false,
    }
  },
  methods: {
    pushedBtn: (s) => {
      if(s === 1){
        console.log(1 + ' disabled');
        this.isPush1 = true;
        this.isPush2 = false;
      } else if ( s === 2) {
        console.log(2 + ' disabled');
        this.isPush2 = true;
        this.isPush1 = false;
      }
      console.log(this);
    }
  }
}
</script>

やりたい事はシンプルなのですが、ここまでハマると思わなかったため、投稿させていただきました。
不足情報あると思いますので、解答に必要そうな事はお聞きください。
よろしくお願いします。

 補足情報(FW/ツールのバージョンなど)

Vue 2.9.6
vue-router, vuex, webpack使用
bootstrap, bootstrap-vue も使用

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • jerome.dupuis

    2018/11/26 21:19

    コードのサンプルを追加お願いします。

    キャンセル

回答 2

+1

dataの定義を下記のようにしてみてください。

 data () {
    return {
      isPush1: false,
      isPush2: false
    }
  },

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/27 10:09

    data 定義を頂いた内容に修正してみました。
    反応は変わらず、ボタンの活性非活性は変わりませんでした。

    同じく、console.logで出力しているthisの値は変更されていますが、
    vue devtoolsで値を確認すると変化してない状態です。

    キャンセル

check解決した方法

0

解消しました

頂いたコメントもヒントとなりましたが、qiita記事の方でもコメント頂けたのでご報告します。

アロー関数、ダメ、絶対

vueコンポーネント内で所々アロー関数funcA: () => {...を使用していたため、
定義の向き先がコンポーネント自身に行っていないという状態でした。
アロー関数をやめてコンポーネントの定義として書き直したところリアクティブにボタンの活性状態が変わる様になりました。
funcA: function () {...  
data () {...  

調査にご助力頂いた方、コメント頂いたみなさまありがとうございました!!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.08%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る