Laravel 无法读取null方法参数的属性替换

本周早些时候，我开始在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>

---

我将卡作为参数传递给

replaceManaSymbols

方法。我可以控制台。记录法力的内容，没有任何问题。但是，如果要修改字符串，Vue就会抛出错误

TypeError:cannotread属性'toLowerCase/split/replace'为null

。我真的不确定出了什么问题。有什么想法吗？

根据经验，你不应该在显示端使用方法。将它们保留在更新端—将更改处理回存储等。方法不是被动的-它们需要被调用。您希望显示自动反映一些底层数据，因此应该使用computed

您还应该避免使用v-html，因为最终会在模板之外生成标记，并且该标记是静态的。我并不完全清楚v-html中会有什么内容，但您应该尝试将标记保留在模板中，并使用数据、道具或计算机注入值。希望这有帮助

---

如果您想要一个div，其中包含一些神奇地变成图像标记的文本，那么这对于

来说是一个很好的用途

根据经验，您不应该在显示端使用方法。将它们保留在更新端—将更改处理回存储等。方法不是被动的-它们需要被调用。您希望显示自动反映一些底层数据，因此应该使用computed

您还应该避免使用v-html，因为最终会在模板之外生成标记，并且该标记是静态的。我并不完全清楚v-html中会有什么内容，但您应该尝试将标记保留在模板中，并使用数据、道具或计算机注入值。希望这有帮助

---

如果您想要一个div，其中包含一些神奇地变成图像标记的文本，那么这对于

来说是一个很好的用途

您

退卡.成本第一个？如果是这样的话，字符串修改就永远不会发生。这仍然是调试的一部分，不管怎样，它看起来像是
card.manaCost
为空。请试着去安慰。记录它？嗯。。。for循环中的所有
card.manaCost
都不为空？是的。土地卡的魔法值为空。我没想到。谢谢您
退卡.成本第一个？如果是这样的话，字符串修改就永远不会发生。这仍然是调试的一部分，不管怎样，它看起来像是
card.manaCost
为空。请试着去安慰。记录它？嗯。。。for循环中的所有
card.manaCost
都不为空？是的。土地卡的魔法值为空。我没想到。谢谢谢谢你的提示！尽管并非总是需要插入一个图像。它为每个
{X}
创建一个图像。这是否也适用于
组件：is
？我发现我目前拥有的解决方案非常漂亮且可读。特别是与Jquery相比，我以前也有过，谢谢你的提示！尽管并非总是需要插入一个图像。它为每个
{X}
创建一个图像。这是否也适用于
组件：is
？我发现我目前拥有的解决方案非常漂亮且可读。尤其是与我以前的Jquery相比
    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);
            }
        });
    }
})