时间戳

首页 > 解决方案 > 如何在 vuejs 中反应性地渲染外部数组

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

问题描述

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

我尝试了什么：

样本更新功能：

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

数组的图像在页面上没有反应

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

库结构：

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 库中响应式渲染或正确更新数组。

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

标签： javascriptarraysvue.js

解决方案

如果您的库正在创建（和管理）“加载器”数组，您可以做的最简单的事情是在 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"/>

查看演示

只要 Vue 和您的“负载管理器”都使用同一个数组（参考），一切都很好。我添加了setTimeout回调LoadManager，以证明“从 Vue 外部”对数组的更改将使 Vue 组件重新渲染......

推荐阅读