在带有 Nativescript-Vue 的 v-for 中使用 fontawesome 图标时出现问题

Question

I'm having problems using fontawesome lib with nativescript-vue inside v-for loop, I have no problem displaying fonts normally but I can't get it to work when they are data-binded inside my v-for loop. My code:

<FlexBoxLayout style="width:100%; height:80px; align-items:center; justify-content:space-around; background-color:rgb(235,235,235);  align-self:flex-end;">
            <FlexBoxLayout v-for="link in nav" :key="link.title" style="width:auto; height:100%; flex-direction:column; align-items:center; justify-content:center;">
                <Label :text="link.icon | fonticon" class="fa c_normal fs_normal"><!--THIS LINE TRIGGERS THE ERROR-->
                <Label :text="link.title" class="fs_normal c_normal"/>
            </FlexBoxLayout>
        </FlexBoxLayout>

I'm getting a template compilling error:

ERROR in ./components/App.vue?vue&type=template&id=45ba5ed4&scoped=true& (../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib??vue-loader-options!./components/App.vue?vue&type=template&id=45ba5ed4&scoped=true&)
Module Error (from ../node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
  Error compiling template:

  <Page class="blg">
      ...
  </Page>

  - [object Object]

 @ ./components/App.vue?vue&type=template&id=45ba5ed4&scoped=true& 1:0-213 1:0-213
 @ ./components/App.vue
 @ ./main.js
File change detected. Starting incremental webpack compilation...

Answer 1

You do not seem to have a closing tag on the Label .

    <FlexBoxLayout style="width:100%; height:80px; align-items:center; justify-content:space-around; background-color:rgb(235,235,235); align-self:flex-end;"> 
        <FlexBoxLayout v-for="link in nav" :key="link.title" style="width:auto; height:100%; flex-direction:column; align-items:center; justify-content:center;">     
           <Label :text="link.icon | fonticon" class="fa c_normal fs_normal" /> 
             <Label :text="link.title" class="fs_normal c_normal"/>
         </FlexBoxLayout>
     </FlexBoxLayout>