我遇到了一个问题,希望 Javascript Jedi 能帮我指明正确的方向。
问题范围:
我正在将 Laravel 集合传递到我的 Vue 组件。在组件内部,我遍历集合并通过 axios 提交表单。表单提交,数据在数据库中更新,但是__我不清楚如何在不刷新页面的情况下显示更新后的值。__
预期结果:
表单提交后更新的数据反射(reflect)在Vue模板中的{{ collection.value }}
出了什么问题:
数据库中的数据正在更新,但 {{ collection.value }}
在页面重新加载之前保持不变。
Web.php:
Route::post('/updateQty', 'MyController@update');
我的 Controller :
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)
我的 Blade :
<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'));
我确信这很简单,但对于我来说,我无法理解它。非常感谢您!
最佳答案
你只需要稍微改变一下你的脚本。
首先,将集合属性保存到数据属性,否则 Vue 会在您尝试更新它时尖叫。为此,我会将传入的 prop
重命名为类似 collections_prop
的名称。然后将其保存到 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;
})
},
}
}
最后,不要忘记更新您 View 中的 Prop 。
<my-component :collections_prop="{{ $collections }}"></my-component>
或者,如果您稍后想将 prop 类型指定为 JSON:
<my-component :collections_prop='@json($collections)'></my-component>
关于javascript - axios POST 后在 Vue 组件中显示更新数据的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57022761/