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

Posted 2023-02-22

【中文标题】在vue js中将响应数据从组件发布到根

【英文标题】：Posting response data from component to root in vue js

【发布时间】：2017-11-15 19:02:29

【问题描述】：

我的模态框在一个 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>

我想将响应数据附加到作为我的 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('收到数据',response)

并将 v-on 放在子组件中

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

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

我可以看到帖子中返回的数据..这是我对象的 id ...我应该对它进行 json 编码吗

【问题讨论】：

你应该看看 vue.js 的 props

我正在尝试在处理程序中 console.log(data) 但得到未定义或根本没有。我用新代码编辑了我的问题

我认为您的后端有问题，而不是前端。您是否尝试过使用 postman 处理相同的请求？

但是我可以在 web 控制台中看到 post 请求返回的数据.. 它发回对象.. 我应该对它进行 json 编码.. 我在响应中发布了另一张图片

【参考方案1】：

代替

在父母中：

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

我在父母中使用过：

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

【参考方案2】：

最简单的方法是在收到响应时使用子组件中的数据发出事件。

儿童： this.$emit('data-received',response)

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

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

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

【讨论】：

我可以在 Web 控制台中看到随发布请求返回的数据 .. 它会发回对象 .. 我应该对其进行 json 编码吗 .. 我在响应中发布了另一张图片

你应该从后端返回 JSON。然后你的代码应该可以工作