Question

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

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

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>

Answer 1

textContent获取并设置DOM节点的文本内容。您不应该直接操作DOM来处理您正在做的事情。

您的作业

   vm.model = buildObjectByArray(modelStructureAsArray);

应该足以更新组件。由于model是一个data项，因此它是被动的，并且对它的赋值是一个被动操作。但是，设置其成员，如

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

由于name未出现在指定的结构中，

会遇到change detection caveat。所以相反，使用

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

并且更新将被动。您不需要为此$nextTick执行任何操作。一个例子如下。顺便说一下，您也可以将代码放在created挂钩而不是jQuery $。

＆＃13;

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);

  }
});

＆＃13;

<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>

＆＃13;

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

1 个答案: