vue.js 不渲染組件

Question

這是我的html：

<div id="modalComponent">
    <remodal-designs v-binds:designid="1074"></remodal-designs>
</div>

這是我在 html 中的腳本：

<script src="{{ FuImg::asset('js/libs/vue.min.js') }}"></script>
<script src="{{ FuImg::asset('js/vue_components/remodal_designs.js') }}"></script>

這是我的 Vue js 組件：

Vue.component('remodal-designs', {

    template : '<div id="modaldesigns" class="cp-remodal remodal" :data-remodal-id="designid">\
                    <button data-remodal-action="close" class="remodal-close"></button>\
                    <div class="container">\
                        <div class="row no-gutter">\
                            <div class="col-sm-6">\
                                <div class="cp-tab-menu active">\
                                    Camisetas Premium\
                                </div>\
                            </div>\
                            <div class="col-sm-6">\
                                <div class="cp-tab-menu">\
                                   Camisetas Basic\
                                </div>\
                            </div>\
                        </div>\
                    </div>\
                </div>\
    ',

    props : ['designid'],



});

組件未呈現。 當我打開 chrome 瀏覽器並使用 Ctrl + U 查看代碼時，什么也沒做。

Chrome 控制台不返回錯誤。

我究竟做錯了什么？

編輯：vue 控制台報告這個

[Vue warn]: failed to compile template:

<div id="modalComponent">
    <remodal-designs v-bind:designid="5rpexo1zwci6"></remodal-designs>
</div>

- invalid expression: v-bind:designid="1074"


(found in root instance)

Answer 1

在 HTML 中，刪除v-bind ：

<div id="modalComponent">
    <remodal-designs designid="1074"></remodal-designs>
</div>

v-bind用於將一個或多個屬性或組件 prop 動態綁定到表達式或 vue 數據。 在這里，您正在傳遞一個常量，因此不需要它。