PrimeVueのDialogのルート要素にscopedなクラスを適用する

Dialogをラップする要素を追加し、append-to="self"を指定する。

環境

  • Vue 3.2
  • PrimeVue 3.18

サンプルコード

<template>
  <div class="dialog">
    <Dialog
      v-model:visible="true"
      append-to="self"
    >
      <template #header>
        Header
      </template>

      <template #footer>
        <Button
          label="OK"
          class="button"
        />

        <Button
          label="Cancel"
          class="button"
        />
      </template>
    </Dialog>
  </div>
</template>

<style lang="scss" scoped>
.dialog {
  .button {
    width: 10rem;
  }
}
</style>

出力例

<style type="text/css">.dialog .button[data-v-80be5e4f] {
  width: 10rem;
}</style>

...省略...

<div class="dialog" data-v-80be5e4f="">
  <div class="p-dialog-mask p-component-overlay p-component-overlay-enter" style="z-index: 1102;">
    <div class="p-dialog p-component p-ripple-disabled" role="dialog" aria-modal="true" pv_id_33="">
      <div class="p-dialog-header">...省略...</div>
      <div class="p-dialog-content">...省略...</div>
      <div class="p-dialog-footer">
        <button class="p-button p-component p-button-outlined p-button-plain button" type="button" aria-label="OK" data-v-80be5e4f="">...省略...</button>
        <button class="p-button p-component p-button-outlined p-button-plain button" type="button" aria-label="Cancel" data-v-80be5e4f="">...省略...</button>
      </div>
    </div>
  </div>
</div>

備考

  • ラップする要素を指定しないと、ルートノードにdata属性が付与されない。
  • append-to="self"を指定しないと、ラップする要素が出力されない。

参考

Vuelidateで条件付きでValidationする

例えば、チェックボックスがONなら、10文字以内を検証OKとする。（OFFなら検証不要）

環境

  • Vuelidate 2.0.0

対応

orバリデータを使用する。エラーメッセージにパラメータが必要な場合、withParams()でパラメータを指定することができる。

const validators = {
  maxLength: helpers.withParams({ max: 10 }, or(() => !data.flag, maxLength(10)))
}

参考