编辑1

Question

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

当我尝试控制log vm.myObject时，它有点奇怪，它显示来自ajax响应的正确值start_date属性。但是，每当我通过vm.myObject.start_date访问特定属性时，它将显示我为数据绑定创建的默认属性。我的代码结构如下：

<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请求处理组件中的数据。我已经尝试过beforeCount之前包含的所有实例，但是它仍然没有解决我的问题。我希望有人能帮我完全理解这种行为。我很乐意欣赏它！

先谢谢你！如果我的解释难以理解或者您有疑问，请在评论部分告诉我们：）

Answer 1

原因是console.log()在返回AJAX响应之前工作，因此console.log(vm.myObject.start_date)打印具有初始值的不变字符串。但是，console.log(vm.myObject)打印您的对象，然后更改，您可以在浏览器控制台中看到实际的属性值。

实施例：

var obj = { "name": "oldName" };
console.log(obj);
obj.name = "newName";

如果您想要对象的“冻结”版本，可以创建一个用于记录的副本：

console.log(Object.assign({}, vm.myObject));

另外，self.myObject.start_date = res.start_date;您可能希望将this.$set(this.myObject, 'start_date', res.start_date);用于change tracking。

Answer 2

您的代码无法按照您在答案中描述的方式运行。你正在进行异步操作（ajax调用）并尝试在同步操作后立即打印值？不。

如果您想instance name，可以在回调函数中执行此操作。

如果要在页面上打印值，但在获取值之前不显示任何内容（异步操作），则可以在console.log(response)上定义一个信号，该信号表示fectching过程是否完成。并在你的回调中切换它。

编辑1

我已编辑代码以说明如何声明data（必须从date-picker方声明。

你必须传递template作为道具（我假设start_date的道具名称是date-picker）。当ajax请求完成时，vue的反应将负责重新呈现start-date

date-picker

Vue JS 2数据操作

2 个答案:

编辑1