Question

我在v-for循环内使用带有nativescript-vue的fontawesome lib时遇到问题，正常显示字体没有问题，但是当它们在我的v-for循环中数据绑定时，我无法使它工作。我的代码：

<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>

我收到模板编译错误：

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

您似乎在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>

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

1 个答案: