为什么用v-html获取到的数据展现到前端变成“{}”

问题遇到的现象和发生背景

为什么用v-html获取到的数据展现到前端变成“{}”这样,但是控制台是有显示数据的

用代码块功能插入代码
classifyId: function  (article_classify_id) {
                    let id = article_classify_id;
                    let classify = async  function(id){
                        let classify_arr_name =
                            axios.get("selectClUpIdName?id=" + article_classify_id).then(function (response) {
                                return response.data;
                            })
                        console.log(classify_arr_name);
                        let name = await classify_arr_name;
                        return name;
                    }
                    console.log(classify(id))
                    return classify(id);
                }

运行结果及报错内容

img

方式方法就错了
首先,你用v-html去渲染,他渲染的是什么,是v-html的值,也就是你写的classifyId函数的值,classifyId是一个异步函数,他的值是什么,它永远是一个promise啊,可是你要把它变成同步函数,他就获取不到你想要的值了
一般异步获取值都是在页面渲染前先用一个变量预占位进行渲染,异步获取对应的值然后更新到这个变量上,页面上会自己进行更新的,比如下面这样

data.forEach(item => {
  item.classifyHtml = '' // 预占位变量
  this.classifyId(item.article_classify_id).then(name => this.$set(item, 'classifyHtml', name))
})

页面就是用classifyHtml 渲染就行:v-html="a.classifyHtml"

最后,这种循环调用接口的做法也是不可取的,浏览器所能同时发起的服务请求是有数量限制的,如果data数据量很大会造成网络堵塞的,而且也是性能的一种浪费,这种需求肯定需要在服务端去获取,然后一把返回给前台

nextTick

你打印的数据 是字符串 用v-html倒是也行。但建议如果是纯字符串还是别用v-html 。你这个列表是 循环出来的吧。 那你 这个 应该也放到 v-for的数据里 。
你 html代码也截个图