Question

我做了一个小库来跟踪所有api调用的加载。
它基本上是一个数组，其中包含描述一个加载过程的对象。我将此库导入单个文件组件以对其进行调用。然后，我将数组从库传递到子组件，并希望呈现数组中的所有对象（加载状态）。我在子组件上的Vue Devtools中看到了数据更新，但是在页面中没有更新。

我尝试过的事情：

从父组件传递vue实例，并使用$ set更新数组
使用array.splice更新数组
使用Object.assign创建新对象，更新新对象，然后更新数组（拼接/ $ set）
在更新w对象时传递密钥并更新此密钥
控制台库中的调用方法

示例更新功能：

function _finish(name, descFinished) {
        const i = _loaders.findIndex(l => l.name == name);
        if(i < 0) throw new NameNotFoundException(name);
        let loader = Object.assign({}, _loaders[i]);
        if(descFinished != undefined) loader.descFinished = descFinished;
        loader.loading = false;
        loader.error = false;
        loader.endTime = new Date();
        vm.$set(_loaders, i, loader);
        return _loaders[i];
}

我这样传递给子组件

<loading-status v-if="loadstatus" :statuses="loadstatus.getAllLoaders()"></loading-status>

子组件看起来像这样

<template>
    <div v-if="statuses">
        <div v-for="status in statuses" :key="status.name">
            <div>
                {{ status.loading == true ? 'true' : 'false' }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'loading-status',
    props: {
        statuses: {
            type: Array,
            required: true
        }
    }
}

image of the array not being reactive on the page

一些可能有用的更多信息：

库结构：

function loadmanager(vueinstance) {
    //library internals here
    // for example my array i want to render:
    let _loaders = [];
    var publicInterface() {
        //public accesable functions here
        //i call this to pass the array to my child component
        getAllLoaders() {
            return _loaders;
        }
    }
    return publicInterface;
}
exports.makeLoadManager = loadmanager;

我将库导入vue SFC中，并在已挂接的钩子中调用

import loadhelper from "../../helpers/Loadstatus.js";
...
data() {
    return {
        loadstatus: null
    }
}
...
mounted() {
    this.loadstatus = loadhelper.makeLoadManager(this);
}

我的问题归结为：如何在vue中从js库中反应性渲染或正确更新数组。

如果能帮助回答我的问题，我很乐意提供更多信息。

Answer 1

如果您的库正在创建（和管理）“加载程序”数组，那么您可以做的最简单的事情是在Vue组件的数据中定义空的反应性数组，并在mounted钩子中将对您的库数组的引用分配给它。像这样：

import LoadingStatus from "./components/LoadingStatus";
import loadhelper from "./helpers/LoadManager.js";

export default {
  name: "App",
  components: {
    LoadingStatus
  },
  data() {
    return {
      statuses: []
    };
  }
  mounted() {
    this.statuses = loadhelper.getAllLoaders();
  }
};

Vue接收库提供的数组，并使它具有反应性。您可以使用如下模板：

<LoadingStatus :statuses="statuses"/>

请参见demo

只要Vue和您的“负载管理器”都在同一个数组（引用）上工作，一切都很好。我在setTimeout中添加了LoadManager回调函数，以演示“从Vue外部”对数组的更改将使Vue组件重新呈现。...

如何在vuejs中反应性地渲染外部数组

1 个答案: