我正在嘗試創建一個表單，用戶插入資料，我應該僅使用 vue js 在另一個頁面中顯示資料
我寫了這個表格
<form
id="main-contact-form"
class="contact-form row"
name="contact-form"
method="post"
>
<div class="form-group col-md-6">
<input
v-model="this.$store.state.name"
type="text"
name="name"
class="form-control"
required="required"
placeholder="??? ??????"
/>
</div>
<div class="form-group col-md-6">
<input
v-model="this.$store.state.price"
type="text"
name="email"
class="form-control"
required="required"
placeholder="?????"
/>
</div>
<div class="form-group col-md-6">
<select
name="subject"
class="form-control"
v-model="this.$store.state.sub"
>
<option value="1">????????</option>
<option value="2">?????</option>
<option value="3">?????</option>
<option value="4">???</option>
<option value="5">????</option>
<option value="6">?????</option>
<option value="7">????? ????</option>
<option value="8">????</option>
</select>
</div>
<div class="form-group col-md-6">
<input
:value="img"
type="file"
name="image"
class="form-control"
placeholder="???? ???? ??????"
/>
</div>
<div class="form-group col-md-12">
<textarea
v-model="this.$store.state.message"
name="message"
id="message"
required="required"
class="form-control"
rows="8"
placeholder="??? ?????? ?? ???? ???"
></textarea>
</div>
<div class="form-group col-md-12">
<input
@submit.prevent="this.$store.state.add"
type="submit"
name="submit"
class="btn btn-primary pull-right"
value="?????"
/>
</div>
</form>
這是我的資料和功能，我從商店匯入它們
export default createStore({
state: {
name: "",
price: "",
sub: "",
img: "",
message: "",
date: "new Date(Date.now()).toLocaleString()",
pro: [],
add: function () {
var New = {
nName: this.name,
nPrice: this.price,
nSub: this.sub,
nImg: this.img,
nDate: this.date,
};
this.name = "";
this.price = "";
this.sub = "";
this.pro.push(New);
alert(5);
// this.$router.push("/control-panel");
},
},
mutations: {},
actions: {},
modules: {},
});
當我按下按鈕時，出現此錯誤（無法 POST /add-new-product ），我該怎么辦或我的代碼有什么問題
uj5u.com熱心網友回復：
“添加”函式不應該在“狀態”物件中，而是移動到“動作”中，因為它呼叫（我可以猜到）一個 api 來保存物件
“通常，如果您想修改/改變您的狀態，您可以在突變中宣告的函式中執行此操作：{}，如果您進行異步操作的 api 呼叫，則您在操作中宣告函式：{}”
前任
export default createStore({
actions:{
add:function(context,params){
return new Promise(function(resolve){
//call your api with ajax, assume that it returns correct
//commit your object to "add" function of mutations
context.commit('add',params);
});
}
}
})
在“添加”操作從“api”請求成功回傳之后，您應該在突變中擁有另一個“添加”函式，它將改變您的“pro”狀態屬性和任何其他“狀態”屬性/屬性，例如
mutations:{
add:function(state,obj){
state.name = "";
state.price = "";
state.sub = "";
state.pro.push(obj);
alert(5);
}
}
通過添加“提交”方法（將呼叫“存盤操作”）重寫您的 vue“表單”組件，如下所示并移動到“表單”標簽
<template>
<form @submit.prevent="submit"
id="main-contact-form"
class="contact-form row"
name="contact-form"
method="post"
>
<div class="form-group col-md-6">
<input
v-model="this.$store.state.name"
type="text"
name="name"
class="form-control"
required="required"
placeholder="??? ??????"
/>
</div>
<div class="form-group col-md-6">
<input
v-model="this.$store.state.price"
type="text"
name="email"
class="form-control"
required="required"
placeholder="?????"
/>
</div>
<div class="form-group col-md-6">
<select
name="subject"
class="form-control"
v-model="this.$store.state.sub"
>
<option value="1">????????</option>
<option value="2">?????</option>
<option value="3">?????</option>
<option value="4">???</option>
<option value="5">????</option>
<option value="6">?????</option>
<option value="7">????? ????</option>
<option value="8">????</option>
</select>
</div>
<div class="form-group col-md-6">
<input
:value="img"
type="file"
name="image"
class="form-control"
placeholder="???? ???? ??????"
/>
</div>
<div class="form-group col-md-12">
<textarea
v-model="this.$store.state.message"
name="message"
id="message"
required="required"
class="form-control"
rows="8"
placeholder="??? ?????? ?? ???? ???"
></textarea>
</div>
<div class="form-group col-md-12">
<input
type="submit"
name="submit"
class="btn btn-primary pull-right"
value="?????"
/>
</div>
</form>
</template>
<script>
export default{
methods:{
submit:function(){
this.$store.dispatch("add", {
nName: this.$store.state.name,
nPrice: this.$store.state.price,
nSub: this.$store.state.sub,
nImg: this.$store.state.img,
nDate: this.$store.state.date,
});
}
}
}
</script>
你可以在這里找到一個作業示例
https://codesandbox.io/s/vuex-store-forked-d8895
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/403399.html
標籤：