Vue 项目卡片组件：编辑项目后更新数据

<template>
  <div class='list-card'>
  <t-card header-bordered :bordered='false' hover-shadow v-on:click='handle'>
    <template #header>
      <t-avatar size='56px'>
        <template #icon>
          <setting-icon/>
        </template>
      </t-avatar>
      <p class='list-card-item_detail--name'>{{ project.project_name }}</p>
      <t-dropdown
        trigger='click'
        :options='[
          {
            content: '编辑项目内容',
            value: 'manage_content',
            onClick: () => handleManageProduct(project),
          },
          {
            content: '管理项目成员',
            value: 'manage_member',
            onClick: () => handleManageMember(project),
          },
          {
            content: '删除',
            value: 'delete',
            onClick: () => handleDeleteItem(project),
          },
        ]'
      >
        <t-button theme='default' shape='square' variant='text'>
          <more-icon />
        </t-button>
      </t-dropdown>
    </template>
    <template #footer>
      <t-button theme='primary' @click='handle(project.ID)'>
        查看详情
      </t-button>
      <div class='project-id'>{{ project.ID }}</div>
    </template>
    <template #content>
      <p class='list-card-item_detail--name'>{{ project.project_name }}</p>
      <p class='list-card-item_detail--desc'>{{ project.project_description }}</p>
    </template>
  </t-card>
  <!-- 项目管理弹窗 -->
    <t-dialog header='编辑项目' :visible.sync='formVisible' :width='680' :footer='false'>
      <div slot='body'>
        <!-- 表单内容 -->
        <t-form :data='formData' ref='form' :rules='rules' @submit='onSubmit()' :labelWidth='100'>
          <t-form-item label='项目名称' name='project_name'>
            <t-input :style='{ width: '480px' }' v-model='formData.project_name' placeholder='请输入项目名称'></t-input>
          </t-form-item>
          <t-form-item label='项目介绍' name='project_description'>
            <t-input :style='{ width: '480px' }' v-model='formData.project_description' placeholder='请输入项目介绍'></t-input>
          </t-form-item>
<pre><code>      &lt;t-form-item style='float: right'&gt;
        &lt;t-button variant='outline' @click='onClickCloseBtn'&gt;取消&lt;/t-button&gt;
        &lt;t-button theme='primary' type='submit'&gt;提交&lt;/t-button&gt;
      &lt;/t-form-item&gt;
    &lt;/t-form&gt;
  &lt;/div&gt;
&lt;/t-dialog&gt;
</code></pre>
  </div>
</template>
<script lang='ts'>
import { ShopIcon, CalendarIcon, ServiceIcon, UserAvatarIcon, LaptopIcon, MoreIcon, AddIcon, SettingIcon} from 'tdesign-icons-vue';

export default {
  name: 'ProjectCard',
  components: {
    MoreIcon,
    SettingIcon
  },
  props: {
    project: {
      type: Object,
    },
  },
  data() {
    return {
      id: -1,
      formVisible: false,
      formData: {
        project_name: '',
        project_description: '',
      },
    };
  },
  methods: {
    handle(id) {
      console.log('您点击了图标，项目信息为：');
      this.id = id
      this.$router.push({ name: 'Tasks', params: {id}})
    },
    handleManageProduct(project) {
      this.id = project.ID;  // 设置当前项目的ID
      this.formVisible = true;
    },
    handleManageMember(project) {
      this.$emit('manage-member', project);
    },
    handleDeleteItem(project) {
      this.$emit('delete-item', project);
    },
    onClickCloseBtn(): void {
      this.formVisible = false;
      this.formData = {};
    },
    onSubmit(params) {
      console.log(params);
      this.formVisible = false;
      console.log({
        project_name: this.formData.project_name,
        description: this.formData.project_description,
      });
      // 将项目名称和描述发送给服务器进行保存
      this.$request.put('http://wxgametest.woa.com/iExplorer/web/projects/${this.id}', {
        project_name: this.formData.project_name,
        description: this.formData.project_description,
      },{headers: {'Content-Type': 'application/json'}}, 
      {withCredentials: true}
      )
        .then((res) => {
          if (res.status === 200) {
            // 如果服务器返回状态码为 200（成功），则从响应数据中获取保存后的项目信息
            this.$message.success('保存成功');
            // 更新项目列表
            this.updateProjectList();
          }
        })
        .catch((err) => {
          console.error(err);
          this.$message.error('保存失败');
        });
    },
    updateProjectList() {
      this.$request
        .get('http://wxgametest.woa.com/iExplorer/web/projects')
        .then((res) => {
          this.projectList = res.data;
        })
        .catch((err) => {
          console.error(err);
          this.$message.error('获取项目列表失败', err);
        });
    },
  },
};
</script>
<p>编辑项目提交后，页面显示的项目信息不是最新的，如何解决？
内容：在编辑项目提交后，页面显示的项目信息不是最新的，可能是因为在提交后没有更新项目信息，可以尝试在提交成功后更新项目列表。</p>
<p>在方法<code>onSubmit</code>中，可以在保存成功后调用一个更新项目列表的方法，例如：</p>
<pre><code class="language-javascript">onSubmit(params) {
  // ...
  this.$request.put('http://wxgametest.woa.com/iExplorer/web/projects/${this.id}', {
    // ...
  }, { 
    // ...
  })
  .then((res) =&gt; {
    if (res.status === 200) {
      // ...
      this.$message.success('保存成功');
      // 更新项目列表
      this.updateProjectList();
    }
  })
  .catch((err) =&gt; {
    console.error(err);
    this.$message.error('保存失败');
  });
},
updateProjectList() {
  this.$request
    .get('http://wxgametest.woa.com/iExplorer/web/projects')
    .then((res) =&gt; {
      this.projectList = res.data;
    })
    .catch((err) =&gt; {
      console.error(err);
      this.$message.error('获取项目列表失败', err);
    });
},
</code></pre>
<p>在<code>updateProjectList</code>方法中，通过发送请求获取最新的项目列表，并将其更新到组件的<code>projectList</code>属性中。</p>
<p>这样，在保存成功后，会自动更新项目列表，从而更新页面显示的项目信息。</p>