<template>
  <div class="creative">
    <el-button
      :type="google"
      round
      @click="changeColor(type)"
      >
      Google
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      google: "",
    }
  },
  methods: {
    async changeColor(color) {
      if(color == "") {
        console.log("toota");
      }
    }
  }
}
</script>

現在このようにコードを書いているのですが、
@click="changeColor(type)"で同じ要素にいるtype属性を指定しているのですが、実行して見るとdefineエラーがでてしまいうまくいきません。

どうすれば、同じ要素に含まれている属性を引数にできますか？

行動規範の内容に同意します

回答1件

ベストアンサー

通常 Vue では state (data)を single source of truth (唯一の情報源) とする形をとるのですが、子コンポーネントの prop に入れた値からデータを取得しようとするのは理由があるのでしょうか？

前者の場合、以下のようになります。

html
1    <el-button
2      :type="google"
3      round
4      @click="changeColor(google)"
5      >

追記

コンポーネントが、自身の prop の値を直接変更してはいけません。ではクリック時に type を変えるにはどうするかというと、type prop は親コンポーネントから与えられるので、親がクリックイベント発生時に type の値を変更します。

クリックするたびにtypeがsuccessとprimaryの間を切り替わるコードの例です。
Codesandbox Demo

html
1<template>
2  <div>
3    <el-button :type="buttonType" @click="toggleButtonType">Button</el-button>
4  </div>
5</template>
6
7<script>
8export default {
9  data() {
10    return {
11      buttonType: 'success',
12    }
13  },
14  methods: {
15    toggleButtonType() {
16      this.buttonType = this.buttonType === 'success' ? 'primary' : 'success'
17    },
18  },
19}
20</script>

公式ガイドも読むといいと思います。
単方向のデータフロー - Vue

全てのプロパティは、子プロパティと親プロパティの間に、単方向のバインディングを形成します: 親のプロパティが更新されると、子へと流れ落ちていきますが、それ以外の方法でデータが流れることはありません。これによって、子コンポーネントが誤って親の状態を変更することがなく、これによって、アプリのデータフローを理解しづらい可能性のある子コンポーネントによる誤った親の状態変更から、防ぎます。