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



  • 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:
    bda107f1-588d-4dbf-b5f3-6cb3d961b396-image.png
    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:
    2283daf4-3667-4c32-8d00-ad7f8472aaf8-image.png

    I’m missing something?



  • @aXiDz

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


Log in to reply