q-item-section dynamic font class doesn't work.

aXiDz

Hello,
I’m trying to create text input and font selection based on that input.

 <q-card flat class="text-grey-4 my-card">
      <q-card-section>
        <q-input v-model="text" />
      </q-card-section>
      <q-card-section>
        <div class="q-gutter-md">
          <q-select
            filled
            v-model="selectedFont"
            :options="fonts"
            stack-label
            label="Text Placeholder Content"
          >
            <template v-slot:option="scope">
              <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
                <q-item-section>
                  <q-item-label v-html="scope.opt" />
                </q-item-section>
                <q-item-section append :class="fonts[scope.index]"> {{text}}</q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
      </q-card-section>
    </q-card>

Small names array:

fonts: ['Arial', 'Helvetica-Bold', 'Boombox'],

Additionally importing more fonts via CSS:

@font-face 
  font-family: Arial
  src: url(/fonts/arial.tff)

// declare a class which applies it
.Arial
  font-family: 'Arial'

@font-face
  font-family: Helvetica-Bold
  src: url(/fonts/Helvetica-Bold.ttf)

// declare a class which applies it
.Helvetica-Bold
  font-family: 'Helvetica-Bold'

@font-face 
  font-family: Boombox
  src: url(/fonts/BoomBox.tff)

// declare a class which applies it
.BoomBox
  font-family: 'BoomBox'

Gives me the following output:

Looking good right? except it’s not the font…
When changing to:

<q-item-section append class="BoomBox"> {{text}}</q-item-section>

It shows the real font:

I’m missing something?

dobbel

@aXiDz

If your create a codepen.io( very simple by extending one of the quasar examples codepens) people can help you better.