图标在表格列内停止工作答案

【问题标题】：Icons cease working inside of a table-column图标在表格列内停止工作
【发布时间】：2018-09-16 04:55:03
【问题描述】：

我的图标发生了奇怪的事情

    <b-table :data="myDir">
        <template slot-scope="props">
            <b-table-column>
                {{ props.row.icon }} <!-- Correct -->
                <i class="fas" :class="'fa-' + props.row.icon"></i> <!-- Wrong -->
                <b-icon :pack="props.row.iconPack" :icon="props.row.icon" :type="props.row.iconType"></b-icon>  <!-- Wrong -->
            </b-table-column>

myDir 通过

更新

        watch: {
            path: function () {
                this.getDir();
            }
        },

        mounted () {
            this.getDir();
        },

        methods: {
            getDir : function() {
                console.log("Loading " + this.path);
                axios
                    .get('?path=' + this.path + '&format=json')
                    .then(response => (this.myDir = response.data))
                    .catch(error => {
                        console.log(error)
                        });
            }
        }

【问题讨论】：

标签： vue.js axios font-awesome bulma buefy

【解决方案1】：

我不知道为什么会这样，但确实如此

我使用的是 JavaScript 版本的 FontAwesome。

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

当我切换到 CSS 版本时，事情开始起作用了

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" crossorigin="anonymous">

【讨论】：