Как добавить различные компоненты на страницу на лету с помощью Vue.js - PullRequest
Новая
       11

Как добавить различные компоненты на страницу на лету с помощью Vue.js

0 голосов
/ 23 октября 2019

Моя цель - дать пользователю возможность динамически создавать форму из разных компонентов на основе того, что они выбирают в элементе select. Например, они могут добавить заголовок, затем абзац, другой заголовок и т. Д. Каждая «часть» - это отдельный компонент.

Я знаю, что такого рода вещи задавались раньше, но я только на второй день в Vue, и я думаю, что 90% пути туда - я просто что-то упустил. Я полагаю, что застрял в том, как добавить компонент к данным моего приложения, чтобы позволить Vue его отобразить.

Вот соответствующая разметка: 

<div id="creator">
    <template v-for="part in existingParts">
        <component :is="part"></component>
    </template>
    <select class = "custom-select" id = "new-part-chooser" v-model="newPart" v-on:change="addPart">
        <option disabled value = "">Add a new part</option>
        <option
            v-for="part in possibleParts"
            v-bind:value="part.toLowerCase()"
            >{{ part }}</option>
    </select>
    <?php
        // These simply bring in the templates for the components
        // I know this isn't standard practice but... one thing at a time
        include 'component-heading.html';
        include 'component-paragraph.html';
    ?>
</div>

и мой javascriptfile: 

Vue.component("part-heading",{
    data:function(){
        return {
            text: ""
        }
    },
    template:"#component-heading-template"
});
Vue.component("part-paragraph",{
    data:function(){
        return {
            text: ""
        }
    },
    template:"#component-paragraph-template"
});

const Creator = new Vue({
    el:"#creator",
    data:{
        newPart:"",
        possibleParts:[
            "Heading",
            "Paragraph"
        ],
        existingParts:[]
    },
    methods:{
        addPart:function(e){
            /*** This is where I'm stuck - what do I push here? ***/
            this.existingParts.push();
        }
    }
});

Я прочитал документы, и Google чертовски вышел из темы, но каждая настройка кажется достаточно отличающейся, и я не могу понять, как ее применить.

1 Ответ

0 голосов
/ 23 октября 2019

Я упустил тот факт, что в разметке директива :is заставляет Vue создать компонент, который соответствует имени элемента в existingParts. Поэтому push() -ing «part-heading» в existingParts заставляет Vue визуализировать экземпляр компонента «part-heading».

Обновленный рабочий код: 

this.existingParts.push('part-'+this.newPart);
...