DOM操作的Vue2 Watcher问题

Question

我正在使用观察程序，以便在具有较大阵列的异步操作后运行certiain UI更改。

如下：

对已加载的文件获取是/否响应

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

内部手表的计算函数参考我正在运行一个函数，以从具有类cutOff的数组中删除元素

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

如您所见，我尝试了不同的操作，我还认为这将需要某种DOM更新，因此我继续运行$forceUpdate()，但它也没有提供解决方案。 尝试在vanilla和jquery上进行尝试，jquery不会返回任何元素，并且elem通过HTMLCollection返回它，但是两者均不响应任何操作。

-jquery会在vue之前加载，并且可以在整个应用程序中完美运行，只有在观察者遇到此问题时，这种情况才会发生。

我只需要在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