当一个刀片包含在另一个刀片中时，Vue.js 被忽略答案

【问题标题】：Vue.js ignored when a blade is included in another blade当一个刀片包含在另一个刀片中时，Vue.js 被忽略
【发布时间】：2020-07-22 21:00:34
【问题描述】：

我在 Laravel 中创建了一个产品卡片视图。该卡有一个简单的“手风琴”（“显示详细信息”） - 默认关闭 - 由 Vue.js 以及一个 Vue.js 数量计数器管理，如果您添加产品，它会更改以克为单位的重量值。从卡片上看，这一切都很好，看起来像这样（关闭）：

我有另一个视图，其中我使用 Vue.js 在数据库中查询产品名称，以显示所有同名产品作为结果。问题是当卡片显示在“父”视图上时，它们都显示为手风琴打开并且计数器没有响应。看起来是这样的：

如您所见，tailwindcss 代码渲染没有问题，但 Vue.js 被完全忽略（尽管父视图的 Vue.js 功能完美运行）我做错了什么？我在这里想念什么？为什么包含刀片中的指令被忽略？

这是管理（产品卡）视图集成到父（产品名称搜索）视图的 Vue.js 方法：

        setGearItem(gearItem) {

            this.gearItem = gearItem;
            this.modal = false;
            console.log(gearItem);

            document.getElementById("displaySearch").innerHTML = "";

            axios.get('/send-name-get-ids/' + this.gearItem)
                .then((response) => {
                    console.log(response.data);
                    if (response.data.length === 0) {
                        document.getElementById("displaySearch").innerHTML = `"<strong>${gearItem}</strong>" was not found in our database. You can add it manually:`;
                        this.generalForm = true;
                        return;

                    } else {
                        for (let i = 0; i < response.data.length; i++) {
                            axios.get('/gearitem/' + response.data[i])
                                .then((response) => {
                                    console.log(response.data);
                                    document.getElementById("displaySearch").innerHTML += response.data;
                                    this.generalForm = false;
                                })
                                .catch((error) => {
                                    document.getElementById("displaySearch").innerHTML =
                                        "No items to display";
                                    console.log(error);
                                });
                        }
                    }
                });
        },

【问题讨论】：

我认为你不能使用 vue 来渲染 livewire 组件的多个实例。这是你在做什么还是我错过了什么？
这不是我正在做的。 Vue 和 LiveWire 管理两个不同的东西。我遇到的问题是系统忽略了 html 中的 vue.js 指令。我试过只显示一张卡片，结果是一样的。我删除了 for 循环 - 结果相同。跟那些东西没关系。
即使我从我的卡片视图中注释掉 @livewire 包含 - 它仍然显示手风琴打开的卡片。所以这不是 LiveWire / Vue.js 冲突。
在这种情况下，我需要更多的刀片文件代码来理解
如果你能提供blade文件，我看看能不能帮忙

标签： javascript php laravel vue.js

【解决方案1】：

问题出在.innerHTML 方法中，因为 Vue.js 会忽略通过此方法添加的任何内容，即使它是 AJAX。该解决方案包括更改控制器以返回 JSON 而不是刀片视图，然后使用 JSON 填充 Vue.js 组件以创建项目的卡片。 setGearItem() 方法更改如下：

        setGearItem(gearItem) {

            this.gearItem = gearItem;
            this.modal = false;
            console.log(gearItem);
            document.getElementById("displaySearch").innerHTML = "";
            this.displayItemCard = false;

            axios.get('/send-name-get-ids/' + this.gearItem)
                .then((response) => {
                    console.log(response.data);
                    this.gearItemId = response.data[0];
                    if (response.data.length === 0) {
                        document.getElementById("displaySearch").innerHTML = 
                        `<p class="text-gray-700 ">
                        <strong class="capitalize">${gearItem}</strong>
                         was not found on our database. <br>You're free to add it manually! </p>`;

                        this.generalForm = true;
                        return;

                    } else {

                        this.displayItemCard = true;
                        
                    }
                });
        },

displayItemCard 只是在视图上激活卡片组件并根据 id 显示正确的卡片。

【讨论】：