在axios POST后，在Vue組件中顯示更新數據的問題

Question

我遇到了一個問題，並希望Javascript Jedi可以幫助我指出正確的方向。

問題范圍：

我將Laravel集合傳遞給我的Vue組件。 在組件內部，我正在遍歷集合並通過axios提交表單。 表單提交，數據在數據庫中更新，但__我不清楚如何在沒有頁面刷新的情況下顯示更新的值.__

預期結果：

表單提交后，更新的數據將反映在Vue模板內的{{ collection.value }}

出了什么問題：

數據正在數據庫中更新，但{{ collection.value }}保持不變，直到重新加載頁面。

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'));

我確信這很簡單，但對於我的生活，我無法繞過它。 非常感謝你提前！

Answer 1

您只需稍微更改腳本即可。

首先，將collections屬性保存到數據屬性，或者當您嘗試更新它時，Vue會尖叫。 為此，我會將傳入的prop重命名為collections_prop 。 然后將其保存到collections數據屬性。

然后在更新響應this.collections = let collections =更改為this.collections = 。

編輯：我將.then函數更改為ES6語法，否則您可能無法訪問this變量。 不需要currentObj東西。

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;
            })
        },

    }
}

最后，不要忘記在視圖中更新道具。

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

或者，如果您想稍后將prop類型指定為JSON：

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