DOM 操作的 Vue2 Watcher 问题

Question

我正在使用 watcher 以便能够在我有一个大数组的异步操作之后运行某些 UI 更改。

如下：

在加载的文件上获得真/假响应

computed: {
            checkAssignmentFilesAreLoaded: function () {
                return this.$store.state.assFilesLoaded
            },

在 watch 的计算函数引用中，我正在运行一个函数来从具有 cutOff 类的数组中删除一个元素

watch: {
            checkAssignmentFilesAreLoaded() {
            const check = $('.cutOff')
            const elem = document.getElementsByClassName("cutOff");
            console.log('test',elem, check);
            }
        },

如您所见，我尝试了不同的方法，我还认为这需要某种 DOM 更新，所以我继续运行 $forceUpdate()，但它也没有提供解决方案。 尝试使用香草和 jquery，jquery 不返回任何元素，elem 通过 HTMLCollection 返回它，但仍然 两者都不响应任何操作。

-Jquery 在 vue 之前加载并在整个应用程序中完美运行，只有 watcher 存在这个问题，才会发生这种情况。

我只需要在 cutOff 中添加一个段落。对此你们怎么看？

编辑：这是一个异步问题：

setTimeout(function(){
                    const cutOff = $('.cutOff')
                    cutOff.append('<div class="cutOff__text">show </div>')
                });

这行得通，但这样做是非常错误的。寻找一个Vue框架解决方案的答案，如果它运作良好，我会接受答案，当然。

Answer 1

这部分我不会使用 jQuery，我会做这样的事情：

<template>
    ...
    <div class="cutOff__text" v-show="checkAssignmentFilesAreLoaded">show</div>
    ...
</template>

<script>
    export default {
        ...
        computed: {
            checkAssignmentFilesAreLoaded: function () {
                return this.$store.state.assFilesLoaded
            },
        }
        ...
    }
</script>

当然在 checkAssignmentFilesAreLoaded 你可以返回 false 或 null 或者已经发生了，如果该函数返回不同，它将显示 div