主页 / 问题 / 690230
Accepted
Nikolay
Asked:2020-07-10 06:23:24 +0000 UTC2020-07-10 06:23:24 +0000 UTC

如何将通过ajax接收到的变量写入vue.js

  • 772

我将组件移动到一个单独的文件，我想获取正确获取的数据，但变量没有被覆盖。如何改变组件的状态？变量以其原始形式显示，没有变化。

<template>
    <p> {{ resp }} </p>
</template>
<script>
    import axios from 'axios';

    let resp = "1";
    axios.get('http://localhost:1337/api/users')
        .then(function(response) {
            resp = response.data;
        });


    export default {
        name: 'test',
        data () {
            return {
                resp: resp
            }
        }
    }

javascript

1 个回答

  1. Best Answer

    在JavaScript中，字符串、数字、布尔null值undefined在分配时按值传递。执行return { resp: resp }时，"1"全局变量的值将被resp复制到resp返回对象的属性中。这意味着当全局变量改变时resp，组件的属性resp不会改变。

    说明您的问题的最少代码：

    let resp = "1";

// имитируем обращение к api, 
// основная задача сохранить асинхронное изменение переменной `resp`
setTimeout(() => { resp = 2 }, 0);

new Vue({
  el: '#demo',
  data() {
    return {
      resp: resp
    }
  }
})
    <script type="text/javascript" src="https://vuejs.org/js/vue.min.js"></script>

<div id="demo">
  <p> {{ resp }} </p>
</div>

    解决问题，可以传递resp对象中的值

    let resp = { value: "1" };

setTimeout(() => { resp.value = 2 }, 0);

new Vue({
  el: '#demo',
  data () {
    return {
      resp: resp
    }
  }
})
    <script type="text/javascript" src="https://vuejs.org/js/vue.min.js"></script>

<div id="demo">
  <p> {{ resp.value }} </p>
</div>

    您可以使用生命周期挂钩

    let resp = "1";

new Vue({
  el: '#demo',
  data () {
    return {
      resp: resp
    }
  },
  created () {
  	setTimeout(() => { this.resp = 2 }, 0); // изменяем значение уже не глобальной переменной `resp`, а свойство `resp` компонента
  }
})
    <script type="text/javascript" src="https://vuejs.org/js/vue.min.js"></script>

<div id="demo">
  <p> {{ resp }} </p>
</div>

    • 3

相关问题