Question

我正在尝试检索全局会话值并将其设置为vue变量。问题是，id变量在控制台上未显示任何值，但在vue组件上确实显示了该值。我已经检查了vue devtools，并且id确实包含正确的值。

Vue组件

<template>
  <div class="container">
    <h1>{{id}}</h1> // the id does displays the value
  </div>
</template>

<script>
export default {
    data () {
        return {
          id:'',
        }
    },
    created(){
        axios.get('api/studentlecture').then(response => this.id = response.data).catch(function(error){console.log(error)
        });     
        console.log(this.id) 
    },
    methods:{

    },
    mounted() {
        console.log('Component mounted.')
    }
}

控制器

public function index()
{
    $id= session('userID');
    return json_encode($id);
}

Answer 1

因为axios调用是异步的。 JavaScript引擎将执行axios请求，并且在等待期间将继续执行代码。

您正在尝试登录this.id，而尚未分配。如果要记录该值，则必须将其放入axios函数的回调中。

axios.get('api/studentlecture')
    .then(response => {
        this.id = response.data;
        console.log(this.id); // <== Here
    })
    .catch(function(error){console.log(error)});

Answer 2

之所以会这样，是因为data=['http://www.supermap.com','http://www.itc.com','http://www.astro.com'] for url in data: print(str(i)+" : "+url) i=i+1 try: html=requests.get(url, timeout=60) soup3 = BeautifulSoup(html.text,"html.parser") meta = soup3.findAll(attrs={"name":'description'}) meta1= soup3.findAll(attrs={"name":'keywords'}) t=[] t1=[] for link in meta: a=link.get("content") t.append(a) for link in meta1: a=link.get("content") t1.append(a) meta=str(t) meta1=str(t1) cur.execute("insert into key_meta(url,descript,keywords)values(?, ?, ?)", (url, meta, meta1)) con.commit()在console.log(this.id)可以解决其承诺之前就已执行。

有一些解决方案。

第一个是将axios.get()移到console.log()内。

then()

或者您可以使用created() { axios.get('api/studentlecture').then(response => { this.id = response.data; console.log(this.id); }).catch(error => { console.log(error) }); }来等待诺言解决

async/await

您可以了解有关承诺here

的更多信息

有关承诺here的异步/等待差异的更多信息

Answer 3

您可以尝试在下面使用以下代码：

/*FRONT-END VUE*/

this.axios.get("https://localhost:8000/api/v1/data").then((response)=>{
                    this.data=response.data;
                    console.log(this.data);
                    if(this.data.success){
                      

                    }
 });

/*BACK-END LARAVEL*/
 
 function getData(){
    $result = array('success'=>true,'data'=>$data);
    
    return Response()->json($result);
 }

Vue数据在控制台上不显示值，但在组件上显示

3 个答案: