VUE3 element-plus中el-alert如何动态修改title？

Question

想根据服务端的返回结果，动态修改 el-alert 的标题

Answer 1

需要使用 Ajax 请求后端接口, 并接受返回值, 再将返回值对象拆解后放入对应的 ele 元素中, Ajax 库建议使用 axios, 下载使用 npm install axios ( 前提是下载了 Node.js ), 然后在 src 中创建一个 utils 文件夹, 再在其下创建 request.js 并书写:

// 引入 axios 库

import axios from 'axios'; 

const request =axios.create({

    baseURL: '主要链接地址' // 如: www.xxx.com/xxx.api.xxx.xxx.xx

})

export default request; //导出模块

用的时候可以 src => api => xxx.js 中书写

import request from '@/utils/request'; // 此处引入刚刚书写的请求文件

export const getData = () => request({

    method: 'GET' //书写请求类型

    url: '此处是次连接' // 如: www.xxx.com/xxx.api.xxx.xxx.xx

})

最后在 Vue 3 的对应文件中链入该文件

import { getData } from '@/api/xxx'

// 封装首页的初始化数据方法

const initIndexData = async () => {

    // 解构 [ 数据中的 data ] 项

    const { data } = await getHomeData()

    // 判断是否获取到数据

    if(data.status !== 200) {

        // 未获取到数据则直接返回

        return;

    }

    // 将获取到的数据赋值给 indexData

    indexData.value = data.data

}

// 调用首页的初始化数据方法

initIndexData()

最后将解析数据放入指定位置即可