在 vue js 中将响应数据从组件发布到根目录

Question

我的模态框在一个 vue 组件中。提交数据时，我希望组件将响应数据发送回父元素，以便我可以将其附加到根元素。

组件

<template>
    <div v-if="value.startsWith('new')">

    <!-- Create Client Modal -->
    <div class="modal show" id="modal-create-client" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button " class="close" data-dismiss="modal" aria-hidden="true" @click.prevent="close">&times;</button>

                    <h4 class="modal-title">Details</h4>
                </div>
                <div class="modal-body">
                    <!-- Form Errors -->
                    <div class="alert alert-danger" v-if="createForm.errors.length > 0">
                        <p><strong>Whoops!</strong> Something went wrong!</p>
                        <br>
                        <ul>
                            <li v-for="error in createForm.errors">
                                {{ error }}
                            </li>
                        </ul>
                     </div>
                     <!-- Create Client Form -->
                     <form class="form-horizontal" role="form">
                         <!-- Name -->
                         <div class="form-group">
                             <label class="col-md-3 control-label">First Name</label>
                             <div class="col-md-7">
                                 <input id="create-client-name" type="text" class="form-control" @keyup.enter="store" v-model="createForm.first">
                             </div>
                         </div>

                         <div class="form-group">
                             <label class="col-md-3 control-label">Last Name</label>
                             <div class="col-md-7">
                                 <input type="text" class="form-control" name="last" @keyup.enter="store" v-model="createForm.last">
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-md-3 control-label">Email</label>
                             <div class="col-md-7">
                                 <input type="text" class="form-control" name="organization" @keyup.enter="store" v-model="createForm.email">
                                 <span class="help-block">Email is required for invoices</span>
                             </div>
                         </div>
                         <div class="form-group">
                             <label class="col-md-3 control-label">Organization</label>
                             <div class="col-md-7">
                                 <input type="text" class="form-control" name="organization" @keyup.enter="store" v-model="createForm.organization">
                             </div>
                         </div>
                     </form>
                 </div>

                 <!-- Modal Actions -->
                 <div class="modal-footer" v-if="value == 'newClient'">
                     <button type="button" class="btn btn-default" data-dismiss="modal" @click.prevent="close">Close</button>
                     <button type="button" class="btn btn-primary" @click="storeClient">Create</button>
                  </div>
                  <div class="modal-footer" v-else-if="value == 'newLead'">
                      <button type="button" class="btn btn-default" data-dismiss="modal" @click.prevent="close">Close</button>
                      <button type="button" class="btn btn-primary" @click="storeLead">Create</button>
                  </div>
                  <div class="modal-footer" v-else-if="value == 'newContact'">
                      <button type="button" class="btn btn-default" data-dismiss="modal" @click.prevent="close">Close</button>
                      <button type="button" class="btn btn-primary" @click="storeContact">Create</button>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>      
   export default {
       data() {
           return {
               createForm: {
                   errors: [],
                   first: '',
                   last: '',
                   email: '',
                   organization: ''
               },
           };
       },
       props: ['value'],
       /**
       * Prepare the component (Vue 1.x).
       */
       ready() {
           this.prepareComponent();
       },
       /**
       * Prepare the component (Vue 2.x).
       */
       mounted() {
           var vm = this
           this.prepareComponent();
       },
       methods: {
           /**
           * Prepare the component.
           */
           prepareComponent() {

               $('#modal-create-client').on('shown.bs.modal', () => {
                   $('#create-client-name').focus();
               });
               $("#modal-create-client").on("hide.bs.modal", function(e) {
                   $(this).removeData('bs.modal');
               });
           },
           close() {
               $('#modal-create-client').removeClass('show');
           },

           /**
           * Create a new client for the user.
           **/
           storeClient() {
               this.persistClient(
                   'post', './clients/add',
                   this.createForm, '#modal-create-client'
               );
           },
           storeLead() {
               this.persistClient(
                   'post', './leads/add',
                   this.createForm, '#modal-create-client'
               );
           },
           storeContact() {
               this.persistClient(
                   'post', './contacts/add',
                   this.createForm, '#modal-create-client'
               );
           },
           /**
           * Persist the client to storage using the given form.
           */
           persistClient(method, uri, form, modal) {
               form.errors = [];

               this.$http[method](uri, form).then(response => {
                   location.reload();
                   $(modal).modal('hide');
               }).catch(response => {
                   if (typeof response.data === 'object') {
                       form.errors = _.flatten(_.toArray(response.data));
                   } else {
                       form.errors = ['Something went wrong. Please try again.'];
                   }
               });
            },
            watch: {
                value: function (value) {
                    // update value
                    $(this.$el).val(value)
                },
            }
        }
    }
</script>

根元素

var MyComponent = Vue.component('my-ajax-component', 
    require('./components/Toolbar.vue') );
    new Vue({
        el: '#select',
        data: {
            selected: ''
        },
        components: {
            // <my-component> will only be available in parent's template
            'my-ajax-component': MyComponent
        }
    });

和我的观点

<div class="form-group clearfix">
    <div class="col-xs-12" id="select">
        {!! Form::label('client_id', 'Choose Client:', ['class' => 'control-label']) !!}
        {!! Form::select('client_id', ['newClient' => 'New Client', $clients], null, ['title' => 'Select Client', 'class' => 'form-control selectpicker', 'v-model' => 'selected', 'data-live-search' => 'true']) !!}
        <br>
        <my-ajax-component v-bind:value="selected"></my-ajax-component>
    </div>
</div>

我不想重新加载位置，而是想将响应数据附加到 select 元素，这是我的 roo

I changed my root element to 

new Vue({
el: '#select',
data: {
    selected: '',
    data: ''
},
components: {
    // <my-component> will only be available in parent's template
    'my-ajax-component': MyComponent
},
methods: {
    handler: function(data) {
        console.log('this is my data' + data)
    }
}

我的组件现在有 this.$emit('data-received',response)

并在子组件中放置 v-on

 <my-ajax-component v-bind:value="selected"  v-on:data-received='handler(data)'></my-ajax-component>

我得到数据未定义或什么都没有

我可以看到 post 中返回的数据..这是我对象的 ID ...我应该 json 对其进行编码吗

Answer 1

最简单的方法是在收到响应后在 child 组件中发出带有数据的事件。

在child中： this.$emit('data-received',response)

父母： <child-component v-on:data-received='handler(data)'>

在parrent的handler函数中，对数据做任何你想做的事。

更新：您的后端应该 return JSON 遵循 REST Api 标准。 API 的每个端点都应该 return JSON，即使它是简单的字符串。

Answer 2

而不是

在父母中：

<child-component v-on:data-received='handler(data)'>

我在父母中使用：

<child-component v-on:data-received='handler'>

在 vue js 中将响应数据从组件发布到根目录

Posting response data from component to root in vue js

vue.js

vue-resource

laravel-5.3

我不想重新加载位置，而是想将响应数据附加到 select 元素，这是我的 roo