Не удалось прочитать замену свойства параметра нулевого метода

Question

Я начал возиться с Vue.js ранее на этой неделе.

Пока что я создал список карт MTG (TCG).Данные поступают из базы данных через запрос Ajax.Это все работает как талисман.

Далее я хочу заменить строку, содержащую стоимость карты, например что-то вроде '{1} {U} {G}', на изображения для соответствующего тега..

HTML:

        <div v-for="(cards, key) in mainBoard" class="">
        <table class="table">
            <tr>
                <th colspan="5">@{{ key }}</th>
            </tr>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>ManaCost</th>
                @if($deck->enableCommander())
                    <th>Commander</th>
                @else
                    <th></th>
                @endif
                <th>Actions</th>
            </tr>
            <tr v-for="card in cards">
                <td>@{{card.pivot.quantity}}</td>
                <td>@{{card.name}}</td>s
                <td v-html="replaceManaSymbols(card)"></td>
                @if($deck->enableCommander())
                    <td>
                        <span v-if="card.pivot.commander" @click="preformMethod(card, 'removeCommander', $event)"><i class="fa fa-flag"></i></span>
                        <span v-else @click="preformMethod(card,'assignCommander', $event)"><i class="far fa-flag"></i></span>
                    </td>
                @else
                    <td>&nbsp;</td>
                @endif
                <td>
                    <button @click="preformMethod(card,'removeCardFromDeck', $event)"><i class="fa fa-times-circle"></i></button>
                    <button @click="preformMethod(card,'plusCardInDeck', $event)"><i class="fa fa-plus-circle"></i></button>
                    <button @click="preformMethod(card,'minusCardInDeck', $event)"><i class="fa fa-minus-circle"></i></button>
                </td>
            </tr>
        </table>
    </div>

Vue.js

    new Vue({
    el: '#Itemlist',
    data: {
        mainBoard: [],
        sideBoard: [],
    },
    methods:{
        preformMethod(card, url){
            var self = this;
            var varData = {
                slug: '{{ $deck->slug }}',
                card: card.id,
                board: card.pivot.mainboard
            };

            $.ajax({
                url: '/vue/'+url,
                data: varData,
                method: 'GET',
                success: function (data) {
                    self.mainBoard = data.mainBoard;
                    self.sideBoard = data.sideBoard;
                },
                error: function (error) {
                    console.log(error);
                }
            });
        },
        replaceManaSymbols(card){
            var mc = card.manaCost;
            var dump = mc.replace(/([}])/g, '},').split(',');
            var html = '';

            /**
             * replace each tag with an image
             */
            return html;
        }
    },
    mounted(){
        var self = this;
        var varData = {
                slug: '{{ $deck->slug }}'
            };

        $.ajax({
            url: '/vue/getDeckList',
            data: varData,
            method: 'GET',
            success: function (data) {
                self.mainBoard = data.mainBoard;
                self.sideBoard = data.sideBoard;
            },
            error: function (error) {
                console.log(error);
            }
        });
    }
})

Я передаю карту в качестве параметра методу replaceManaSymbols.Я могу console.log содержимое маны без каких-либо проблем.Но как только хочется изменить строку, Vue выдает ошибку TypeError: Cannot read property 'toLowerCase/split/replace' of null.Я не совсем уверен, что происходит не так.Есть идеи?

Answer 1

Как правило, вы не должны использовать методы на стороне дисплея.Сохраните их для обновления - обработка изменений обратно в магазин и тому подобное.Методы не являются реактивными - их нужно вызывать.Вы хотите, чтобы ваш дисплей автоматически отражал некоторые базовые данные, поэтому вы должны использовать computed.

Вам также следует избегать использования v-html, потому что вы в итоге получаете разметку вне ваших шаблонов, и эта разметка является статической.Мне не совсем понятно, что будет в v-html, но вы должны попытаться сохранить разметку в своем шаблоне и ввести значения, используя данные, реквизиты или вычисления.Надеюсь, это поможет!

Если вы хотите использовать div с текстом, который волшебным образом превращается в тег изображения, это может быть полезно для <component :is>.