老师，有功能能实现问题
来源：1-5 项目作业
陆小小
2021-12-20 22:53:01
问题描述：
老师，我想实现当我在input中输入内容时，点击保存，然后把数据存到，store里面去，然后每次点击保存就再发送一组数据，可以在管理数据中把存进去得数据一个个遍历出来，但是我不太懂怎么去实现，请老师指教以下
相关代码：
<template>
<div class="wrapper">
<div class="title">
<span class="title__back iconfont" @click="handleBackTo"></span>
<span class="title__text"> 编辑收货地址 </span>
<span class="title__add-address" @click="saveAddressMessage(message)">保存</span>
</div>
<div class="address-msg">
<div class="msg-box">
<span class="info">所在城市:</span>
<input type="text" class="content" v-model="message.city"/>
</div>
<div class="msg-box">
<span class="info">小区/大厦/学校:</span>
<input type="text" class="content" v-model="message.location"/>
</div>
<div class="msg-box">
<span class="info">楼号-门牌号:</span>
<input type="text" class="content" v-model="message.number"/>
</div>
<div class="msg-box">
<span class="info">收货人:</span>
<input type="text" class="content" v-model="message.receiver"/>
</div>
<div class="msg-box">
<span class="info">联系电话:</span>
<input type="text" class="content" v-model="message.phone"/>
</div>
</div>
</div>
</template>
<script>
import { reactive, toRefs,ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
name: "EditAddress",
setup() {
const router = useRouter();
const store = useStore();
const message = {city:'',location:'',number:'',receiver:'',phone:''};
const handleBackTo = () => {
router.back();
};
const saveAddressMessage = (message) => {
store.commit("saveAddressMessage", {message});
};
console.log(store.state.address);
return { handleBackTo,saveAddressMessage, message};
},
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-F8F8F8;
}
.text {
margin: 0.16rem 0 0.12rem;
font-size: 0.14rem;
color: $color-333;
}
.title {
display: flex;
padding: 0 0.18rem;
line-height: 0.44rem;
background-color: $color-FFF;
justify-content: space-between;
&__back {
font-size: 0.2rem;
color: $color-B6B6B6;
}
&__text {
font-size: 0.16rem;
color: $color-666;
}
&__add-address {
font-size: 0.14rem;
color: $color-333;
}
}
.address-msg {
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-top: 0.12rem;
padding: 0 0.18rem 0 0.18rem;
width: 3.75rem;
height: 2.24rem;
background-color: $color-FFF;
.msg-box {
flex: 1;
display: flex;
align-items: center;
border-bottom: 0.01rem solid $color-F1F1F1;
.info {
margin-right: 0.1rem;
font-size: 0.14rem;
color: $color-666;
line-height: 0.2rem;
}
.content {
border: none;
outline-style: none;
color: $color-333;
font-size: 0.14rem;
}
}
.msg-box:nth-child(5) {
border-bottom: none;
}
}
</style>问题描述：
我本来想这样实现的，但是并不可行
4回答
-
好帮手慕久久
2021-12-21
store中的index.js中的数据:
[
{
city: "北京",
createdAt: "Mon Jan 11 2021 17:14:13 GMT+0800 (China Standard Time)",
department: "海淀区西三环北路2号院北京理工大学国防科技园",
houseNumber: "2号楼10号",
name: "小慕",
phone: "18611112222",
updatedAt: "Mon Jan 11 2021 17:14:13 GMT+0800 (China Standard Time)",
_id: "1",
},
{
city: "北京",
createdAt: "Mon Jan 11 2021 17:14:13 GMT+0800 (China Standard Time)",
department: "海淀区西三环北路2号院北京理工大学国防科技园",
houseNumber: "2号楼10号",
name: "小慕",
phone: "18611112222",
updatedAt: "Mon Jan 11 2021 17:14:13 GMT+0800 (China Standard Time)",
_id: "2",
}
]
store中的index.js中的mutations:
路由：
祝学习愉快！
0 -
好帮手慕久久
2021-12-21
编辑收货地址:
<template>
<div class="wrapper">
<div class="title">
<div class="iconfont title__back" @click="handleBackClick"></div>
<div class="title__text">编辑收货地址</div>
<div class="title__save" @click="saveFn">保存</div>
</div>
<div class="form">
<div class="form__item">
<div class="form__item__label">所在城市:</div>
<input class="form__item__content" v-model="add.city" />
</div>
<div class="form__item">
<div class="form__item__label">小区/大厦/学校:</div>
<input class="form__item__content" v-model="add.department" />
</div>
<div class="form__item">
<div class="form__item__label">楼号-门牌号:</div>
<input class="form__item__content" v-model="add.houseNumber" />
</div>
<div class="form__item">
<div class="form__item__label">收货人:</div>
<input class="form__item__content" v-model="add.name" />
</div>
<div class="form__item">
<div class="form__item__label">联系电话:</div>
<input class="form__item__content" v-model="add.phone" />
</div>
</div>
</div>
</template>
<script>
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
export default {
name: 'MyAddressList',
setup () {
// 获取路由相关内容
const route = useRoute()
const router = useRouter()
const id = route.params.id
// 获取vuex中的数据
const store = useStore()
const addressList = store.state.addressList
// 找到当前id对应的具体数据。input中使用v-model直接绑定add
const add = addressList.find(item => {
return item._id == id
})
// 找到当前id对应的索引
const idx = addressList.findIndex(item => {
return item._id == id
})
// 将地址中的idx项，改成最新的add
addressList[idx]=add
// 点击保存，将最新的addressList，发送给vuex
const saveFn = function () {
store.commit("editor", addressList)
}
const handleBackClick = () => { router.back() }
return { handleBackClick, add, saveFn }
}
}
</script>
<style scoped>
@import '../../style/viriables.scss';
.wrapper {
overflow-y: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: $dark-bgColor;
}
.title {
display: flex;
line-height: 0.44rem;
background: $bgColor;
font-size: 0.16rem;
color: $content-fontcolor;
text-align: center;
&__back {
width: 0.2rem;
margin-left: 0.18rem;
font-size: 0.2rem;
color: $search-fontColor;
}
&__text {
flex: 1;
text-align: center;
}
&__save {
margin-right: 0.2rem;
font-size: 0.14rem;
}
}
.form {
padding: 0 0.2rem;
margin-top: 0.12rem;
background: $bgColor;
border-top: 0.01rem solid $content-bgColor;
border-bottom: 0.01rem solid $content-bgColor;
&__item {
display: flex;
padding: 0.12rem 0;
line-height: 0.2rem;
font-size: 0.14rem;
border-bottom: 0.01rem solid $content-bgColor;
&:last-of-type {
border-bottom: none;
}
&__label {
margin-right: 0.05rem;
color: $medium-fontColor;
}
&__content {
flex: 1;
border: none;
outline: none;
color: #3f3f3f;
&::placeholder {
color: #3f3f3f;
}
}
}
}
</style>
0 -
好帮手慕久久
2021-12-21
整体代码如下：
管理收货地址:
<template>
<div class="wrapper">
<div class="title">
<div class="iconfont title__back" @click="handleBackClick"></div>
<div class="title__text">管理收货地址</div>
<div class="title__add" @click="handleAddClick">新建</div>
</div>
<div class="address">我的收货地址</div>
<Address
v-for="address in addressList"
:key="address._id"
:address="address"
@click="() => handleUpdateClick(address._id)"
/>
</div>
</template>
<script>
import Address from "../../components/Address";
import { useStore } from 'vuex'
import { useRouter } from "vue-router";
export default {
name: "MyAddressList",
components: { Address },
setup () {
const router = useRouter();
// 获取vuex中的数据
const store = useStore()
const addressList = store.state.addressList;
const handleBackClick = () => {
router.back();
};
const handleAddClick = () => {
router.push({ name: "UpsertAddress" });
};
// 点击地址，携带id跳转到编辑地址页面
const handleUpdateClick = (addressId) => {
router.push(`/editAddress/${addressId}`);
};
return { addressList, handleBackClick, handleAddClick, handleUpdateClick };
},
};
</script>
<style scoped>
@import '../../style/viriables.scss';
.wrapper {
overflow-y: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: $dark-bgColor;
}
.title {
display: flex;
line-height: 0.44rem;
background: $bgColor;
font-size: 0.16rem;
color: $content-fontcolor;
text-align: center;
&__back {
width: 0.2rem;
margin-left: 0.18rem;
font-size: 0.2rem;
color: #b6b6b6;
}
&__text {
flex: 1;
text-align: center;
}
&__add {
margin-right: 0.2rem;
font-size: 0.14rem;
}
}
.address {
margin: 0.16rem auto 0.12rem 0.18rem;
font-size: 0.14rem;
color: #333333;
}
</style>
0 -
好帮手慕久久
2021-12-21
同学你好，首先要提示一点，该页面做成静态的就可以了(数据写死就行了）；实际开发中，该页面会配合后端完成，比如在编辑页面，点击保存时，就把数据发送给后端；然后返回管理收获地址页面，会把所有新的数据重新请求回来并渲染。
如果同学想利用vuex存储数据，老师给你提供一个思路供参考：
1、在管理收获地址页面将vuex中存储的地址都渲染出来：
2、在收获地址页面，获取vuex中本地址id对应的具体数据，并与input双向绑定:
3、点击保存按钮时，修改vuex的数据：
请继续查看下一条回复。
0
相似问题