图标在表列中停止工作

Question

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

    <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)
                        });
            }
        }

Answer 1

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

我正在使用FontAwesome的JavaScript版本。

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