Vue.js propsにstyleの種類を渡したい

Question

userChipsのコンポーネントを使った時にuserChipsに何かの値を渡してその値に応じてstyleを変化させることって可能なのでしょうか？
propsの値に応じて　border-radius: 13px;を適応させるか適応させないかをしたいです。
わかる人がいましたら教えてください。
よろしくお願いいたします。

  <user-chip
    v-for="book in user.books"
    :text="`${book.name}`"
    :key="book.id"
    :hogehoge="true"
  />

<template>
  <div class="chip">
    <p>{{ text }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class UserChip extends Vue {
  @Prop({ type: String, required: true }) text: string
  @Prop({ type: boolean })　hoogehoge: boolean
}
</script>

<style lang="scss" scoped>
.chip {
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 12px;
  // border-radiusを適応させるかさせないかをpropsの値で判断させたい
  border-radius: 13px;
  box-sizing: border-box;
  max-width: 388px;
  p {
    text-overflow: ellipsis;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 14px;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>

Answer 1

v-bindが使えるでしょう。
クラスとスタイルのバインディング — Vue.js
Propsの変化によってクラス名のオンオフができるのでそれでスタイルの適用が切り替えられます。Vue.jsはドキュメントがていねいなので暇なときにでも眺めておくと良い発見があるかと思います。コードを書くだけではなくドキュメントも読んでみましょう。

Comments

[kakedashidesu]

ありがとうございます。
<user-chip
v-for="book in user.books"
:text="`${book.name}`"
:key="book.id"
vbind:class="{ active: true }"
/>
上記のようにvbindを使って書きました。

[kakedashidesu]

propsを受け取る側はどう書いたらいいのでしょうか？
@Component
export default class UserChip extends Vue {
@Prop({ type: String, required: true }) text: string
}
上記の行でpropsの値を受け取っている？？？からここにactiveを追加すればいいのでしょうか？

[A_kirisaki]

propsの何が変化したらactiveがどうなって欲しいかの処理を書く必要があります

[kakedashidesu]

@Component
export default class UserChip extends Vue {
@Prop({ type: String, required: true }) text: string
@Prop({ type: boolean })
}

[kakedashidesu]

上記みたいな感じですか？
@Component、@Propsの@がなんの意味か分からなかったので
Vue.js ＠で調べたのですが記事が出てこず困っています

[A_kirisaki]

@Componentはアノテーションと呼ばれ、TypeScriptのための機能です。
実際の処理の書き方については
https://qiita.com/nrslib/items/be90cc19fa3122266fd7#%E7%AE%97%E5%87%BA%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3
このあたりを調べると良いかもしれません

[kakedashidesu]

ありがとうございます。記号みたいなものなんですね

[kakedashidesu]

@Component
export default class UserChip extends Vue {
@Prop({ type: String, required: true }) text: string
@Prop({ type: boolean })
}
propsの受け取り方は上記であっているでしょうか？

[kakedashidesu]

ドキュメント読みましたが処理が自分のと同じではないのであまり理解できず...

[A_kirisaki]

@Prop({ type: boolean }) hogehoge
ですね。hogehogeはプロパティ名に合わせて変えてください。
確認したいのですが「渡されたプロパティの変化によって（例えばtextが変化した）スタイルを変化させたい」のか「プロパティに真偽値わたしてスタイルを切り替えたい」のかどちらなのでしょうか。前者なら算出プロパティを使うため難しくなりますが、後者ならプロパティを増やすだけで十分です。

[kakedashidesu]

プロパティーの真偽値によって変化させたいです

[A_kirisaki]

でしたらプロパティを増やしてv-bindにクラス名をキーに、プロパティ名を値にした連想配列を読み込ませればできるはずです

[kakedashidesu]

{ type: boolean })のとこで以下のエラーが出るのですがなぜなのでしょうか？
'boolean' only refers to a type, but is being used as a value here.Vetur(2693)

[kakedashidesu]

ん？？すいません。全く理解できないですwww

[kakedashidesu]

<user-chip
v-for="book in user.books"
:text="`${book.name}`"
:key="book.id"
:key = true
/>

[kakedashidesu]

上記のような感じですか？

[A_kirisaki]

@Prop({ type: boolean }) hogehoge
となっていますか。

[kakedashidesu]

質問文に新しく書き直しました！
見て欲しいです

[A_kirisaki]

OKです！あとはスタイルを当てたい場所にv-bindを書きましょう。この場合chipのクラスが付いているところですね？そこに書きましょう。

[kakedashidesu]

<user-chip
v-for="book in user.books"
:text="`${book.name}`"
:key="book.id"
v-bind:hogehoge="true"
/>
ってことですか？？？

[A_kirisaki]

「スタイルを当てたい場所」です。コンポーネントそのものにはスタイルは当てられません。HTMLでクラス名にchipがついてる部分です

[kakedashidesu]

<template>
<div v-bind:class="chip">
<p>{{ text }}</p>
</div>
</template>

上記であっていますか？？

[A_kirisaki]

OKです！

[kakedashidesu]

この後どうすればいいんでしょうか？

[A_kirisaki]

あ、すみません、class="chip"は残したままでv-bind:class="{ foobar: hogehoge }"としてください。
foobarは新しくCSSにクラスを作ってそこにborder-radiusをつけましょう。

[kakedashidesu]

foobarってなんでしょうか？

[kakedashidesu]

<template>
<div v-bind:class="{ foobar: hogehoge }" class="chip">
<p>{{ text }}</p>
</div>
</template>
こうゆうことですか？

[A_kirisaki]

hogehogeが真になったときにつくクラス名です

[kakedashidesu]

なるほど。ありがとうございます！！

[kakedashidesu]

この後どうすればいいですか？

[kakedashidesu]

<template>
<div <div v-bind:class="[hogehoge? chip : foobar]">>
<p>{{ text }}</p>
</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class UserChip extends Vue {
@Prop({ type: String, required: true }) text: string
@Prop({ type: boolean })　hoogehoge: boolean
}
</script>

<style lang="scss" scoped>
.chip {
margin-right: 8px;
margin-bottom: 8px;
padding: 6px 12px;
// border-radiusを適応させるかさせないかをpropsの値で判断させたい
border-radius: 13px;
box-sizing: border-box;
max-width: 388px;
p {
text-overflow: ellipsis;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: #000000;
white-space: nowrap;
overflow: hidden;
}
}
.foobar{
margin-right: 8px;
margin-bottom: 8px;
padding: 6px 12px;
box-sizing: border-box;
max-width: 388px;
p {
text-overflow: ellipsis;
font-style: normal;
font-weight: normal;
font-size: 12px;
line-height: 14px;
color: #000000;
white-space: nowrap;
overflow: hidden;
}
}
</style>

[kakedashidesu]

上記のようにしましたがうまくいきません。なぜなのでしょうか？