如何用ajax给vue中的data（）属性赋值？

在element ui tree组件上右击会出现“添加基站”，我会将相关的信息更新的mysql中，随后重新加载页面。这样tree就更新了。但是现在要做到不刷新页面。

原来的实现代码：

    el: '#b-leftcol', 
            mounted(){


            },
            
            data() {
            var data = <?php require_once(dirname(__FILE__)."/MysqlInterface/ReadTreeData.php");  echo preg_replace('/"([a-zA-Z]+[a-zA-Z0-9]*)":/','$1:', json_encode(ReadTreeData(), JSON_UNESCAPED_UNICODE)); ?>;
            return {
                currentNodeData:"",
                data : data,
                defaultProps: {
                children: "children",
                label: "label"
                }
            }
            },
})

主要是 data 赋值方式

这次优化我目前的代码：

el: '#b-leftcol', 
    mounted(){
        // this.getData();
    },
    
    data() {
      // var data = this.getData();
      return {
        currentNodeData:"",
        data :data,
        defaultProps: {
        children: "children",
        label: "label"
        }
      }
    },
    methods: {
      getData(){
    
        ajaxPost('./MysqlInterface/ReadTreeData.php', {}, 'POST', function(rep) {
                      console.log("xzb",rep);
                  
              }, function() {});
      },

1.就是用ajax的方式请求而已，console 出来看结果，结果是对的，但是不知道如何赋值给data

2.ajax请求是异步，在拿到结果前，页面已经加载完成。不知道如何规避这个问题。

3.当我后续修改数据以后，我想通过重新调用执行这个ajax函数该怎么办？

源于chatGPT仅供参考

要使用Ajax为Vue中的data()属性赋值，可以在组件的mounted()生命周期钩子中调用一个异步请求，并在请求成功后将响应数据赋给data属性。

以下是一个示例代码，演示了如何通过Ajax请求更新Vue组件中的data属性：

```javascript
new Vue({
  el: '#b-leftcol',
  mounted() {
    this.getData();
  },
  data() {
    return {
      currentNodeData: "",
      data: null,
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    getData() {
      // 发送异步请求获取数据
      // 这里假设使用axios库发送Ajax请求，您也可以根据自己喜好选择其他Ajax库
      axios.get('./MysqlInterface/ReadTreeData.php')
        .then(response => {
          // 请求成功后将响应数据赋给data属性
          this.data = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

在上述代码中，我们在组件的mounted()生命周期钩子中调用了getData()方法，该方法通过发送Ajax请求从服务器获取数据。在请求成功后，使用箭头函数获取响应数据，并将其赋给data属性。

请注意，上述示例使用axios库发送Ajax请求，您需要确保已经正确引入并配置了axios库。如果您使用其他Ajax库，请相应地调整代码。另外，为了简化示例，我在getData()方法中只展示了请求成功的情况，您可以根据需要添加错误处理和其他逻辑。

```

1.在回调函数function拿到请求结果的时候直接复制

getData(){
        const that = this
        ajaxPost('./MysqlInterface/ReadTreeData.php', {}, 'POST', function(rep) {
                      console.log("xzb",rep);
                  that.data = rep
              }, function() {});
      }

2.用vue的话是数据驱动视图，页面加载完成才获取到数据是没问题的，vue检测到数据更新的话，会自动更新页面的
3.在你需要调用getData方法的地方, this.getData()

赋值就直接写就行了，没什么特别的技巧，vue是数据驱动视图，你直接给data里面的数据赋值""=""就可以，页面的数据就会自动改变了，如果你要封装请求的话，可以参考一下这篇文章:http://t.csdn.cn/h1ohC