Search code examples
vue.jsaxiosfont-awesomebulmabuefy

Icons cease working inside of a table-column

Strange things are happening to my icons

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

enter image description here

myDir gets updated via

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

  • I don't why this works, but it does

    I was using the JavaScript version of FontAwesome.

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

    When I switched to the CSS version, things started working

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