2023年7-9月前端学习笔记

2023.07.03

1、遇到的坑：element plus的switch开关，首次进入页面就执行@change事件

<el-switch
  v-model="row.status"
  size="large"
  class="ml-2"
  width="70"
  inline-prompt
  active-text="上架"
  inactive-text="下架"
  @change="changeStatus(row)"
></el-switch>

const changeStatus = async (row: any) => {
  const res = await store.dispatch("adaptation/addAdaptation", {
    id: row.id,
    status: row.status === true ? 2 : 1,
  });
  if (res.code === 200) {
    ElMessage.success("更新成功");
    store.dispatch("adaptation/adaptationList", parameter);
  }
};

也可以使用这种方法解决：element-plus第一次会加载或刷新会触发change的解决办法_逍遥596607010的博客-CSDN博客

2023.07.04

1、在html标签中匹配对应id的name

<div>
  <template v-for="el in typeData">
    <span v-for="(item, index) in detail.type_ids" :key="index">
      <span v-if="el.id === item" class="owner">
        {
  { el.name }}
      </span>
    </span>
  </template>
</div>

2023.07.14

1、nuxt3刷新页面useFetch()无返回

await nextTick(); //解决刷新页面useFetch无返回

2、nuxt3刷新动态路由时会显示404 & 动态路由页面怎么写

1.解决办法：在nuxt.config.ts中单独配置该动态路由 

export default defineNuxtConfig({
  css: ["@/assets/css/common.scss"], //公共css
  generate: {
    routes: ["/detail/id"], //解决动态路由刷新变成404的问题
  },
});