如何在编辑框展示已发布的信息，并且能继续编辑

嗷呜~小脑斧

已于 2022-10-28 09:50:59 修改

阅读量406

点赞数 1

文章标签：前端 vue javascript vue.js html

于 2022-10-28 09:49:28 首次发布

本文链接：https://blog.csdn.net/weixin_46939404/article/details/127564868

版权

比如某人发布了一个公告展示在页面上

有两个页面：一个是展示公告提示的页面，一个是编辑公告的页面

点击展示公告页面跳转编辑公告页面，就能进入编辑框编辑，编辑之后能够展示已发布的公告内容，那么如何能做到发布公告之后再次进入编辑页面，编辑框展示的是已经发布过的内容呢？

1.在展示公告的页面增加一句代码

sessionStorage.NoticeInfo = JSON.stringify(res.results);

这句是用来存储调接口拿到的数据的 NoticeInfo 可以随意命名，只是一个用来存放数据的盒子

比如换个名字，叫a ，就可以这样写：

sessionStorage.a = JSON.stringify(res.results);

这句加在调接口的方法里面，我是用getInfo（）来查询公告信息，调接口的方法就如下图这样写：

methods: {

    getInfo(){
      let params = {
        teacherCode: this.teacherCode
      }
    getInfo(params).then(res => {
        if(res.code=='00000'){
          this.remark = res.results.remark
          sessionStorage.NoticeInfo = JSON.stringify(res.results);
          //把调接口获取的数据存在NoticeInfo里面
        }else{
          this.$toast(res.message)
        }
      })

    },

加在了判断里面：

this.remark = res.results.remark // 如果调用成功，页面上展示的公告就是调接口返回的

sessionStorage.NoticeInfo = JSON.stringify(res.results); //如果调用成功，就把返回的数据存在NoticeInfo里面

这个展示公告的.vue文件只要加那句标红的代码就行啦~

2.在编辑公告的页面

首先要写一个获取存放公告内容的盒子（这个盒子就是在展示公告页面的那个盒子哦，NoticeInfo）：
```
methods: {
     getInfo() {
      this.remark = JSON.parse(sessionStorage.getItem('NoticeInfo')).remark
    },
```

解释一下这句话的含义：

this.remark就是这个页面中要拿到的数据，也就是要拿到的公告，这个数据该去哪拿呢？

这句话就是把NoticeInfo盒子中的remark赋值给this.remark,这样数据就拿到啦！

其次，获取的数据当然要展示在页面上啦，那必然少不了以下这个：
```
  mounted() {
      this.getInfo();
  },
```
另外别忘了data里面也要加上哦：
```
 data() {
    return {
      NoticeInfo:{}
    };
```
以上三个就是要在script中加的东西啦

紧接着看看html中该如何加,只有一个地方要加哦！

<textarea
        @keyup.esc="save()"   
        v-model="remark"       
        maxLength=" "
        placeholder="请输入内容..."    
        :style="{ width: '100%'}"
></textarea>

v-model="remark" 双向绑定，remark在上面有提到怎么获取到

只要加这句代码就大功告成啦！