更新 Vue 数据对象关闭 AJAX 响应答案

【问题标题】：Updating Vue Data Object Off AJAX response更新 Vue 数据对象关闭 AJAX 响应
【发布时间】：2018-04-10 14:56:33
【问题描述】：

我想要做的是使用 AJAX 加载模板，然后从 AJAX JSON 响应构建数据模型。我希望它是被动的。根据我在 Vue 文档中阅读的内容，必须在初始化时设置所有实例对象属性，以便它们具有反应性。我很好奇我该怎么做。

我正在根据点符号字符串数组生成对象 model，将 csv 文件转换为 JSON，然后将该数据解析为新的 model 对象。这就是我设想的过程

var vm = new Vue({
    el: '#app',
    data: function() {
        return {
            model: {}
        };
    }
});


/**
   -Load template, 
   -build model object, 
   -update Vue data, 
   -have template react to new data
*/
$(function() {

    // Load in html
    $(#model).load('./template.html', function(response, status, xhr) {

        var modelStructureAsArray = [
            'meta',
            'data',
            'data.details'
        ];

        // Update Vue data for model
        vm.model = buildObjectByArray(modelStructureAsArray);

        /**
        // Expected structure
          vm.model = {
            meta: {
            },
            data: {
                 details: {
                 }
            }
          }
        **/

       // This would be where I set all the data, im using a function to parse and 
       // return a full model, below is simplified for brevity

       vm.model.meta.name = 'Daniel';
       vm.nextTick(function() {
           vm.$el.textContent === 'Daniel';
       };

    }

});

加载的 HTML

<!-- template.html -->
<template v-if="model.meta">
    <header>
        <h1>{{ model.meta.name }}</h1>
    </header>
</template>

我不明白如何使用 vue.nextTick() 来更新 vue 模型并使其具有反应性。文档显示设置属性，然后立即调用 Vue.nextTick() 来更新它。

我不确定 $el 的 textContent 属性是什么，并且无法通过谷歌搜索找到它。它是否更新了根元素中括号内的所有文本？

编辑：添加 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue: Reactive</title>

    <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<header>
    <h1>Reactive Vue</h1>
</header>

<main id="app"></main>

<script src="./app.js" charset="utf-8"></script>
</body>
</html>

【问题讨论】：

标签： ajax vue.js vuejs2

【解决方案1】：

textContent 获取和设置 DOM 节点的文本内容。您不需要直接操作 DOM 来执行您正在执行的操作。

你的任务

   vm.model = buildObjectByArray(modelStructureAsArray);

应该足以更新组件。由于model 是data 项目，它是反应式的，分配给它是反应式操作。但是，设置其成员，如

   vm.model.meta.name = 'Daniel';

遇到change detection caveat，因为分配的结构中不存在name。所以改为使用

vm.$set(vm.model.meta, 'name', 'Daniel');

并且更新将是被动的。为此，您无需对$nextTick 执行任何操作。下面是一个例子。顺便说一句，您不妨将代码放在created 钩子中，而不是jQuery 中的$。

var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      model: {}
    };
  },
  created() {
    setTimeout(() => {
      vm.model = {
        meta: {},
        data: {
          details: {}
        }
      }
      vm.$set(vm.model.meta, 'name', 'Daniel');
    }, 500);

  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <template v-if="model.meta">
    <header>
        <h1>{{ model.meta.name }}</h1>
    </header>
</template>
</div>

【讨论】：

我得到一个错误，模型没有使用 vm.$set(model.meta) 设置，所以我不得不使用 vm.model.meta，我可以看到这更新了 Vue 中的数据开发工具，但它仍然没有在页面内做出反应。
作为后续，我将如何实现 AJAX？我会在超时函数中或之前放置一个 .ajax/.load 吗？我需要加载html模板，然后将两个json请求的结果存储到vue实例中。
而不是超时。我用 timeout 代替了 Ajax，因为它们都是异步的东西，你可以在其中放置回调。由于你正在加载模板，你可能需要将整个 new Vue 放在 ajax 回调中。 Vue 将使用 #app 中的任何内容作为其模板。我想你想在 Vue 看到它之前进行设置。