Где / Как определить место отправки для моего собственного компонента формы (Vue)? - PullRequest
Новая
       10

Где / Как определить место отправки для моего собственного компонента формы (Vue)?

0 голосов
/ 24 марта 2019

Я хочу повторно использовать компонент формы через мой веб-сайт, но кнопка отправки будет каждый раз обрабатывать разные вещи (отображать разные данные в зависимости от того, какая страница вызывает компонент формы)

IЯ немного новичок в том, чтобы расплачиваться с компонентами Vue и передавать данные между ними, до сих пор я делал грязные одностраничные приложения.

В моем текущем плане есть форма для получения входных данных / фильтров (из компонента формы), и при нажатии кнопки «Отправить» эти данные (каким-то образом?) Должны быть отправлены элементу, который их вызвал, - и узнает, какобрабатывать его в конкретном случае, откуда он был вызван.Я надеюсь, что это правильный подход к такого рода сценарию (?).

  • Является ли мой план правильным использованием Vue / правильным способом отправки формы из внешнего компонента формы?

  • Каким образом я могу инициировать отправку для отправки данных / запуска метода вне моего DashboardForm.vue компонента?

  • Как отправить извлеченные данные компонента DashboardForm.vue из ReportType1.vue и повторно использовать эту функцию в ReportType2.vue.

Это мой компонент Vue Form (DashboardForm.vue): 

<template>

    <div class="row">

        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <form id="mainForm" class="form-material row" method="POST">
                        <div class="" id="date-range">
                            <datepicker v-model="startDate" input-class="form-control inputDate" placeholder="Start Date" required></datepicker>
                            <div class="input-group-append">
                                <span class="input-group-text b-0 text-white"> to </span>
                            </div>
                            <datepicker v-model="endDate" input-class="form-control inputDate" placeholder="End Date" required></datepicker>
                            <input type="button" class="btn btn-info waves-effect waves-light" v-on:click="groupFilterDisplay(true);" value="Filter by Group"/>
                            <!-- <input type="button" id="submit-btn" class="btn btn-success waves-effect waves-light" v-on:click="loadNew" value="Submit"/> -->
                            <input type="button" id="submit-btn" class="btn btn-success waves-effect waves-light" value="Submit"/>
                        </div>
                    </form>

                </div>
            </div>
        </div>

        <transition name="fade">
            <div id="groupFilter" class="popupGroupFilter" v-if="groupFilter">
                <div id="filterArea">
                    <input type="text" v-model="searchGroupInput" placeholder="Search" class="gfSearch">
                    <span class="gfTitle">Filter by Group</span>
                    <hr>
                </div>
                <div class="ulTree">
                    <ul>
                        <tree_item class="item" v-bind:model="groupTree"></tree_item>
                    </ul>
                </div>
                <div v-on:click="applyGroupFilter();" class="gfClose gfApply"><span>✔ Apply</span></div>
                <div v-on:click="groupFilterDisplay(false);" class="gfClose"><span>X Close</span></div>
            </div>
        </transition>

    </div>
</template>

<script>
// import { GF } from '../mixins/GF.js';

export default {
    name: 'DashboardForm',
    // mixins: [GF],
    data() {
        return {
            groupTree:          window.groups,
            searchGroupInput:   '',
            searchGroupArray:   [],
            groupFilterApplied: false,
            groupFilterBackup:  [],
            selectedIds:        [],

            groupFilter:        false, 
            startDate:          null,
            endDate:            null,
            mode:               0,
        }
    },
    props: {
        options: Array
    },
    watch: {
        'searchGroupInput': function (newVal, oldVal) {
            this.groupTree = this.searchGroupResult();
        }
    },
    methods: {
        recurseGroups: function (arr, action) {
        },
        applyGroupFilter: function () {

        },
        groupFilterDisplay: function (display) {

        },
        searchGroupResult: function () {
        },
        fetchGroupIds: function () {
        }
    }
};
</script>

Это компонент, который использует DashboardForm, например (ReportType1.vue): 

<script>
    import DashboardForm    from "../tools/DashboardForm.vue";

    export default {
        components: {
            DashboardForm
        },
        data() {
            return {
            };
        },
        created() {
        },
        mounted() {
        },
        destroyed() {
        },
        watch: {
        },
        methods: {
        }
    }
</script>

<!-- Template -->
<template>
    <div>

        <!-- Form -->
        <DashboardForm/>

        <!-- form result -->
        <div id="resultContainer"> <datatable/> </div>

    </div>
</template>

1 Ответ

2 голосов
/ 24 марта 2019

Хорошо, если я вас хорошо понял, мы пытаемся создать многократно используемый компонент формы. Я кратко расскажу, как взаимодействуют компоненты VUE.

  1. Компонент принимает необходимые входные данные, используя props.
  2. Внутренний HTML-код компонента может быть передан от пользователя с помощью slot.
  3. Компонент запускает события, чтобы сообщить своему пользователю, что внутри меня что-то произошло.

Пример трех случаев:

Ваш компонент my-form шаблон: 

<form>
    <div class="row">
        <slot></slot>
    </div>
    <div class="row">
        <div class="col-12">
            <button type="button" class="btn btn-default" @click="onSubmit"></button>
            <button v-if="hasReset" class="btn btn-danger" @click="onReset"></button>
        </div>
    </div>
</form>

Ваш компонент js Файл: 

export default {
name: 'my-form',
data() {
    return {
    }
},
props: {
    reset: boolean
},
computed: {
    hasReset: function(){
        return this.reset;
    }
}
methods: {
    onSubmit: function(){
        let data = { "name": "dummy data" };
        this.$emit("submit", data);
    },
    onReset: function(){
        let data = { "name": "" };
        this.$emit("reset", data);
    }
}
}

После этого вы можете использовать my-form компонент, как показано ниже: 

<my-form :reset="formHasReset" @submit="onFormSubmit" @reset="onFormReset">
    <input class="col-12" type="text" name="name">
    <input class="col-12" type="text" name="username">
    <input class="col-12" type="password" name="password">
    <input class="col-12" type="email" name="email">
</my-form>

И JavaScript: 

data(){
    formHasReset: true
},
methods: {
    onFormSubmit: function(data){
        console.log(data.name); //Should give you 'dummy data'
    },
    onFormReset: function(data){
        console.log(data.name); //Should give you ''             
    }
}

Надеюсь, теперь вам ясно:).

...