親コンポーネントで、特定のプロパティしたものにだけ、クラスを付与したい

Question

親コンポーネントで、特定のプロパティしたら、クラスを付与したいです。

行いたいこと

今回でいうと、親コンポーネントで、プロパティ（test）を指定したものにだけ、center-textというクラスをつけれるようにしたいです。

現状

親コンポーネントで読み込んでいる、すべての<parent>タグに、center-textがついてしまっています。

親コンポーネント

<parent>
hogeテキスト
</parent>

<parent
  test="center"
>
  中央寄せテキスト
</parent>

子コンポーネント

<template>
  <div
    :class="{ 'center-text': isCenter }"
  >
  </div>
</template>

<script>
props: {
  test: {
    type: Boolean
    default: true
  }
}
data() {
  return  {
    isCenter: this.test
  }
}
</script>

なにか、アドバイスいただけると助かります。
よろしくお願いします。

Answer 1

親コンポーネントで、プロパティ（test）を指定したものにだけ、center-textというクラスをつけれるようにしたいです。

ごめんなさい、HTMLの属性を取得してクラスの適用する方法は分からないです。
代替え案で申し訳ないですが、
親コンポーネントからv-bindで、子コンポーネントにデータを渡せば可能だと思います。

下記サンプル、

//ParentComponent.vue
<child :message="'左寄せ'" :isCenter="false" />
<child :message="'中央寄せ'" :isCenter="true" />

の:isCenter="false"で子コンポーネントに中央寄せかを伝え、

子コンポーネントでは

<div class="child" :class="{ center: isCenter }">

の:class="{ center: isCenter }"でclass名が「center」を追加するのか決めています。

以下、サンプルと実行結果です。

//ParentComponent.vue

<template>
  <div class="parent">
    <hr />
    <child :message="'左寄せ'" :isCenter="false" />
    <hr />
    <child :message="'中央寄せ'" :isCenter="true" />
    <hr />
  </div>
</template>
<script>
import child from "./ChildComponent.vue";
export default {
  name: "Parent",
  components: { child }
};
</script>
<style lang="scss">
.parent {
  background-color: blue;
  text-align: left;
}
</style>

//ChildComponent.vue

<template>
  <div class="child" :class="{ center: isCenter }">
    <span class="block-area">{{ message }}</span>
  </div>
</template>
<script>
export default {
  name: "Child",
  props: {
    message: {
      type: String,
      default: null
    },
    isCenter: {
      type: Boolean,
      default: false
    }
  }
};
</script>
<style lang="scss">
.center {
  text-align: center;
}
.child {
  background-color: red;
  .block-area {
    background-color: green;
    color: white;
  }
}
</style>

Comments

[roronoazoro]

手元操作、代替案までいただきありがとうございます!
勉強になります。
時間のあるときに手元操作して、確認してみたいと思います。
取り急ぎのお礼まで(_ _)

[roronoazoro]

手元でも操作してみました。
isCenter真偽値プロパティで以下2パターンを確認できました。
false：左寄せ
true：中央寄せ

ありがとうございました（_ _）