javascript - Vue JS 2 数据操作

Question

我有一个安装在 Vue 中的实例，我试图设置一个日期选择器，其开始日期取决于 ajax 响应提供的数据。假设此数据属性名为 start_date。我通过在 Vue 中创建的实例运行我的 ajax 请求。

当我尝试控制台记录 vm.myObject 时有点奇怪，它显示来自 ajax 响应的正确值 start_date 属性。但是，每当我通过 vm.myObject.start_date 访问特定属性时，它都会向您显示我为数据绑定(bind)创建的默认属性。我的代码结构如下:

<script>
export default {
  mounted() {
    const vm = this;
    console.log(vm.myObject); // this will show the data from ajax response

    console.log(vm.myObject.start_date); //this will show the default value I set which si the 2017-10-25
  },
  created() {
    const self = this;
    $.ajax({
      url: ApiRoutes.paths.GetDealData,
      data: { id: 1 },
      success: function(res) {
        self.myObject.start_date = res.start_date;
      }
    });
  },
  data() {
    return {
      myObject: { start_date: "2017-10-25" }
    };
  }
};
</script>

我是 Vue JS 的新手，所以我目前很难通过 ajax 请求处理组件中的数据。我已经尝试了 beforeCreate、beforeMount 中包含的所有实例，但它仍然没有解决我的问题。我如何理解这种行为？

Answer 1

您的代码无法真正按照您在回答中描述的方式工作。您正在进行异步操作(ajax 调用)并尝试在同步操作后立即打印值？不。

如果你想 console.log(response) ，你可以在你的回调函数中完成。

如果你想在页面上打印值，但在获取值之前不显示任何内容(异步操作)，你可以在你的 data 上定义一个属性，如果 fectching 过程完成或不。并在回调中切换它。

我已经编辑了代码以显示如何声明 date-picker(必须从 template 端声明。

您必须将 start_date 作为 Prop 传递(我假设 date-picker 的 Prop 名称是 start-date)。当 ajax 请求完成时，vue 的 react 性将负责重新呈现 date-picker

<template>
  <div>
    <datePicker :start-date="myObject.start_date" />
  </div>
</template>
    
<script>
export default {
  created() {
    $.ajax({
      url: ApiRoutes.paths.GetDealData,
      data: { id: 1 },
      success: function(res) {
        self.myObject.start_date = res.start_date;
        self.isFetchedFinished = true
      }
    });
  },
  data() {
    return {
      startDate: ''
    };
  }
};
</script>