未显示字符串模板答案

【问题标题】：String template not displayed未显示字符串模板
【发布时间】：2018-05-29 08:34:00
【问题描述】：

我在创建组件/模板时遇到问题。我实际上是按照这里的说明进行操作的：

https://www.vuemastery.com/courses/intro-to-vue-js/components

我的代码和视频里的基本一致（当然有错误除外）

我的问题是，该组件根本没有显示。

这是我完整的 Vue.JS 代码：

Vue.config.devtools = true;
var app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#app',

});
Vue.component('product', {
    template:
    `<div class='product'>
        <button class="btn btn-outline-success my-2 my-sm-0">Items [[ cart ]]</button>
        <div class="row">
            <div class="col-md">
                <img :src=image class="rounded float-left" alt="..." style="width: 50%">
            </div>
            <div class="col-md">
                <h1>Products: [[ title ]]</h1>
                <p>Description: [[ description ]]</p>
                <p v-if="inStock">In Stock</p>
                <p v-else :class="{outOfStock: inStock == 0}">Out of stock</p>
                <ul v-for="detail in details">
                    <li>[[ detail ]]</li>
                </ul>
                <div v-for="(variant, index) in variants"
                     :key="variant.variantId"
                     class="color-box"
                     @mouseover="updateProduct(variant.variantImage, index)"
                     :style="{ backgroundColor: variant.variantColor }">
                </div>
                <br>
                <button @click="addToCart"
                        :disabled="!inStock">
                    Add to Cart
                </button>
            </div>
        </div>
    </div>`,
    data() {
        return {
            product: 'Essen ',
            brand: "Muhannad Kalieh",
            description: 'Thats my description for the socks',
            selectedVariant: 0,
            onSale: true,
            details: ["Selber zubereitet", "frische Zutaten", "schmeckt geil nahuj"],
            variants: [
                {
                    variantId: 2224,
                    variantColor: "green",
                    variantQuantity: 15,
                    variantImage: '/images/essen1.jpeg',
                    sale: 1
                },
                {
                    variantId: 34,
                    variantColor: "blue",
                    variantQuantity: 0,
                    variantImage: '/images/essen2.jpeg',
                    sale: 0
                }
            ],
            cart: 0
        }
    },
    methods: {
        addToCart() {
            this.cart += 1
        },
        updateProduct(variantImage, index) {
            this.selectedVariant = index;
        }
    },
    computed: {
        title() {
            return this.brand + ' ' + this.product;
        },
        image() {
            return this.variants[this.selectedVariant].variantImage;
        },
        inStock() {
            return this.variants[this.selectedVariant].variantQuantity;
        }
    }
});

和 HTML

<div id="app">
    <product></product>
</div>

在我尝试将我的代码用作组件之前，所有代码都可以正常工作。也许是因为分隔符？还是反引号``？我真的没有任何线索了

感谢您的帮助！

【问题讨论】：

// 编辑 -- 我更改了分隔符 [[ var ]] 因为我在 laravel 框架中使用 vue.js。 Laravel 的分隔符与 {{ }}
尝试在<div class='product'>之前添加<div>
试过了，对我没用
这个文件的扩展名是什么？ .vue?
你在使用 webpack 吗？

标签： vue.js vuejs2 vue-component

【解决方案1】：

你必须在你的 vue 实例之上声明你的组件。在 Vue.js 模板中，您需要将自定义模板封装在额外的 <div></div> 中，它会像这样：

// your template
Vue.component('product', {
template:
    `
     <div>
         <div class='product'>
           ... your vue codes here
         </div>
     </div>
    `    
});

Vue.config.devtools = true;
var app = new Vue({
    delimiters: ['[[', ']]'],
    el: '#app'
});

【讨论】：

哎呀我来晚了 :-) 没有关注你的 cmets

【解决方案2】：

您需要在实例化新的 Vue 实例之前声明组件。此外，要使分隔符起作用，您需要将它们放在组件声明中。

您可以看到一个工作示例here

Vue.component('product', {
  delimiters: ['[[', ']]'],
  template:....
});

var app = new Vue({
  el: "#app",
});

【讨论】：