Шаблон строки не отображается - PullRequest
Новая
       6

Шаблон строки не отображается

0 голосов
/ 29 мая 2018

У меня проблема с созданием компонентов / шаблонов.Я практически следую инструкциям здесь:

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>

, прежде чем я попытался использовать свой код в качестве компонента, весь кодработал.Может быть, потому, что разделители?или галочки ``?У меня действительно нет никакой подсказки

Спасибо за любую помощь!

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Вам необходимо объявить компонент перед созданием нового экземпляра Vue.Кроме того, чтобы разделители работали, их необходимо поместить в объявление компонента.

Рабочий пример можно посмотреть здесь 

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

var app = new Vue({
  el: "#app",
});
0 голосов
/ 29 мая 2018

Вы должны объявить свой компонент выше вашего экземпляра 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'
});
...