Как передать props vue.js?

Question

Нужно передать дочернему компоненту "block" его координаты и цвет. Я так понимаю, это делается через props, но данный код не работает. Подскажите, что исправить?

Vue.component('block', {
    props: {
        pos_x: Number, pos_y: Number, color1: String
    }
    ,
    template: `
    <div id="block" :style="{ left: x + '%', bottom: y + '%', backgroundColor: color }">
    </div>
    `,
    data() {
        return {
            x: this.pos_x,
            y: this.pos_y,
            color: this.color1
        };
    },
    created() {
        setInterval(this.move, 50);
    },
    methods: {
        move() {
            if (this.y > 0) this.y -= 0.5;
        }
    }
});

var app = new Vue({
    el: '#app',
    data: {
        items: []
    },
    created() {
        setInterval(this.add_block, 2000);
    },
    methods: {
        add_block() {
            this.items.push({ pos_x: this.generateRandomPos() , pos_y: 100, color1: this.generateRandomColor() })
        },
        generateRandomColor() {
            const randomRed = Math.floor(Math.random() * 256);
            const randomGreen = Math.floor(Math.random() * 256);
            const randomBlue = Math.floor(Math.random() * 256);

            return `rgb(${randomRed},${randomGreen},${randomBlue})`;
        },
        generateRandomPos() {
            const random = Math.floor(Math.random() * 83);

            return random;
        }
    }
})

Answer 1

Нужно сообщить приложению, куда именно вставить компонент block, и передать ему необходимые параметры.

<div id="app">
    <block v-for="item in items"
           v-bind:pos_x="item.pos_x"
           v-bind:pos_y="item.pos_y"
           v-bind:color1="item.color1"
    ></block>
</div>

И почему вы поставили тег vue3, если код у вас vue2?

БЛОГ НА HUSL

Как передать props vue.js?

Ответы (1 шт):