在axios POST之后在Vue组件中显示更新的数据的问题 [英] Issue displaying updated data in Vue component after axios POST

问题描述

我陷入了困境，并希望 Javascript Jedi 可以帮助我指出正确的方向.

I'm stuck on a problem and was hoping that a Javascript Jedi could help point me in the right direction.

问题范围:

我正在将Laravel集合传递给我的Vue组件.在组件内部，我正在遍历集合并通过axios提交表单.表单提交后，数据库中的数据已更新，但是 __我不清楚如何在不刷新页面的情况下显示更新后的值.__

I'm passing a Laravel collection to my Vue component. Inside the component, I'm iterating through the collection and submitting a form via axios. The form submits, the data is updated in the database, but __I'm not clear on how to show the updated value without a page refresh.__

预期结果:

提交表单后，更新的数据将反映在Vue模板内的 {{collection.value}} 中

The updated data is reflected in the {{ collection.value }} inside the Vue template after form submission

出了什么问题:

数据库中的数据正在更新，但是 {{collection.value}} 保持不变，直到重新加载页面为止.

The data is being updated in the database, but the {{ collection.value }} remains the same until page is reloaded.

Web.php :

Route::post('/updateQty', 'MyController@update');

MyController :

public function update(Request $request)
{
    $product = Product::where('id', $request->productId)
        ->update([ 'qty' => $request->qty ]);

    return response()->json($product);
}


public function index()
{

    $collection = DB::table('products')->get();

    return view('my-blade', [
        'collections' => $collection,
    ]);

}

数据库中存储的$ collection结构:

'qty' => decimal(8,2),
'class' => varchar(255),
'description' => varchar(255),
'value' => decimal(8,2),
'productId' => int(11)

我的刀片:

<my-component :collections="{{ $collections }}"></my-component>

MyComponent.vue :

<template>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <table class="table table-sm">
                    <div v-if="collections.length">
                        <tr v-for="collection in collections" v-bind:key="collection.id">
                            <td>
                                <form @submit="updateQty">
                                <input type="hidden" id="productId" :value="collection.productId" name="productId">
                                    <select class="form-control" name="qty" id="qty" @change="updateQty">
                                        <option :value="collection.qty">{{ collection.qty }}</option>
                                        <option v-for="(x, index) in 200" v-bind:key="index" :value="index">{{ index }}</option> 
                                </select>
                                </form>
                            </td>
                            <td>{{ collection.value }}</td>
                        </tr>
                    </div>
                </table>
            </div>
        </div>
    </div>
</template>


<script>

export default {
    props: ['collections'],

    data() {
        return {
            qty: '',
        }
    }

    mounted() {
        console.log('MyComponent.vue mounted successfully');
    },

    methods: {

        updateQty(e) {
            e.preventDefault();

            let currentObj = this;
            let url = '/updateQty';

            axios.post(url, {
                qty: qty.value,
            })

            .then(function (response) {
                currentObj.value = (response.data);
                let collections = response.data;
            })
        },

    }
}
</script>

App.js

Vue.component('my-component', require('./components/MyComponent.vue'));

我敢肯定这很简单，但是对于我一生来说，我无法将自己束之高阁.提前非常感谢您！

I'm sure it's something simple, but for the life of me I can't wrap my head around it. Thank you very much in advance!

推荐答案

您只需要稍微更改一下脚本即可.

You just need to change up your script a bit.

首先，将collections属性保存到data属性，否则当您尝试更新它时，Vue会尖叫.为此，我会将传入的 prop 重命名为类似 collections_prop 的名称.然后将其保存到 collections 数据属性.

First, save the collections property to a data property, or Vue will scream when you try to update it. To do this, I would rename the incoming prop as something like collections_prop. Then save it to the collections data property.

然后在更新响应中将 let collections = 更改为 this.collections = .

Then change let collections = to this.collections = in your update response.

编辑:我将 .then 函数更改为ES6语法，否则可能无法访问 this 变量.不需要 currentObj 东西.

I changed the .then function to ES6 syntax as you may have trouble accessing the this variable otherwise. No need for the currentObj stuff.

export default {
    props: ['collections_prop'],

    mounted() {
        console.log('MyComponent.vue mounted successfully');
    },
    data() {
        return {
            collections: this.collections_prop;
        }
    },
    methods: {

        updateQty(e) {
            e.preventDefault();

            let url = '/updateQty';

            // not sure where qty is coming from 
            // but you said that's all worked out
            // on your end

            axios.post(url, {
                qty: qty.value,
            })

            .then(response => {
                this.collections = response.data;
            })
        },

    }
}

最后，不要忘了更新视图中的道具.

And finally, don't forget to update the prop in your view.

<my-component :collections_prop="{{ $collections }}"></my-component>

或者如果您以后想要将prop类型指定为JSON:

Or if you want to later specify prop type as JSON:

<my-component :collections_prop='@json($collections)'></my-component>

这篇关于在axios POST之后在Vue组件中显示更新的数据的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！