Question

我通过AJAX读取了一个项目列表并将其推送到数据数组中：

loadSparepartFiles: function() {
    var vm = this;
    vm.activeSparepart.attachments = [];
    ajaxApi.loadJson('spareparts/sparepart/getFiles/'+vm.activeSparepartId, function(data) {
        for (var i = 0; i < data.files.length; i++) {
            vm.activeSparepart.attachments.push({
                filename: data.files[i]
            });
        }
    });
},

在Chrome中的Vue devTools中，我可以看到更新的数据数组，但DOM列表仍然是空的。

模板：

<div v-for="file in activeSparepart.attachments" class="uk-width-1-2 uk-margin-bottom">
    <a href="{{ baseUrl }}/download/sparepart/{{ activeSparepartId }}/{{ file.filename }}" target="hidden-frame" class="block-link">
        <i class="delete uk-icon-remove"></i>
        <i class="icon uk-icon-image"></i>
        <span class="title">
            {{ file.filename }}
        </span>
    </a>
</div>

此处初始化activeSparepart对象：

resetSparepart: function() {
    this.activeSparepart = {
        alternates: [],
        locations: [],
        logs: [],
        usages: [],
        vendors: [],
        sparepart: {},
        attachments: []
    };
    this.activeSparepartId = 'new';
},

Vue devTools显示以下内容：

Answer 1

我认为问题是你的activeSparepart.attachments没有被动反应。阅读此http://rc.vuejs.org/guide/reactivity.html#Change-Detection-Caveats。

如果activeSparepart是对象，并且您添加了属性attachments，则无法识别附件......

Vue不允许向已创建的实例动态添加新的根级别响应属性。但是，可以使用Vue.set（object，key，value）方法将反应属性添加到嵌套对象中：

Vue.set(vm.activeSparepart, 'attachments', [])

Answer 2

请记住，您将Vue.js组件数据定义为函数返回一个完整的新对象以防止数据与其他组件共享。如果你想修改一个数组，你需要首先得到整个数据，进行更改，然后重新整理一下。

if request.method == 'POST':
    IDlist = []
    ids = request.form['ids']
    f_n = request.form['f_n']
    for i in ids:
        i.split(',')
        IDlist.append(i)

更新数组后，vue.js没有更新DOM

2 个答案: