体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师，有功能能实现问题

来源：1-5 项目作业

陆小小

2021-12-20 22:53:01

问题描述：

老师，我想实现当我在input中输入内容时，点击保存，然后把数据存到，store里面去，然后每次点击保存就再发送一组数据，可以在管理数据中把存进去得数据一个个遍历出来，但是我不太懂怎么去实现，请老师指教以下

相关代码：

<template>
  <div class="wrapper">
    <div class="title">
      <span class="title__back iconfont" @click="handleBackTo">&#xe744;</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>

问题描述：

我本来想这样实现的，但是并不可行

https://img.mukewang.com/climg/61c098a20914b00509601030.jpg


写回答

4回答

好帮手慕久久

2021-12-21

store中的index.js中的数据:

https://img.mukewang.com/climg/61c13dba09d660eb10090708.jpg

 [

      {

        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:

https://img.mukewang.com/climg/61c13df209e50a4707150616.jpg

路由：

https://img.mukewang.com/climg/61c13e2409efe39411650359.jpg

祝学习愉快！


0

好帮手慕久久

2021-12-21

编辑收货地址:

<template>

  <div class="wrapper">

    <div class="title">

      <div class="iconfont title__back" @click="handleBackClick">&#xe6f2;</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">&#xe6f2;</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中存储的地址都渲染出来：

https://img.mukewang.com/climg/61c13c09091b701f05890339.jpg



https://img.mukewang.com/climg/61c13ced0990091508980846.jpg

2、在收获地址页面，获取vuex中本地址id对应的具体数据，并与input双向绑定:

https://img.mukewang.com/climg/61c13d16098e126208200382.jpg

https://img.mukewang.com/climg/61c13d2a096a57f809380255.jpg

3、点击保存按钮时，修改vuex的数据：

https://img.mukewang.com/climg/61c13d4809d4dfa607230292.jpg

请继续查看下一条回复。

0

前端工程师

前端入门如同写字，如果你不知道从哪开始，那就选择前端（含Vue3.x，React17,TS）

20327 学习 · 17877 问题

查看课程

相似问题

以访问到 登陆页面，但点击登陆按钮一会后提示“请求失败” 然后无法进入 首页

回答 1

老师我的页面突然变成404了怎么解决?

回答 1

展示和隐藏功能的实现？

回答 1

老师

回答 1

老师，请教一下

回答 1

打开慕课网App查看更多内容