JavaScript：在 Vue.js 模态中获取 DOM 元素

Question

我在我的 Vue 应用程序中使用 Vue.js modal。它是 Vue 组件的一部分。模板部分仅包含模态：

<template>
    <!-- Modal: Edit exercise -->
    <modal name='edit-exercise-modal'
           :draggable='true'
           height='auto'>

        <form @submit.prevent='storeEdits'>
            <div ref='myDiv'>Some text</div>
            <!-- Also tried:
            <div id='my-div'>Some text</div>
            -->
        </form>

    </modal>
</template>

我需要访问 DOM 元素以使用 Rangy 库并突出显示 my-div 中的一些文本。但是每当我尝试在方法中获取它时，我会得到undefined 或null，这取决于我使用的是纯JS 还是Vue refs：

console.log(this.$refs.myDiv); // undefined
console.log(document.getElementById('my-div'); // null

当我执行console.log(this.$refs) 时，我在refs 属性中得到myDiv。但是当我在console.log 之后直接用debugger 停止代码执行时，refs 似乎是空的。

这里有什么问题？我该怎么做才能获得对我需要修改的div 的引用？

编辑：这是一个更完整的 sn-p

<template>
    <!-- Modal: Edit exercise -->
    <modal name='edit-exercise-modal'
           :draggable='true'
           height='auto'>

        <form @submit.prevent='storeEdits'>
            <div ref='myDiv'>Some text</div>
            <!-- Also tried:
            <div id='my-div'>Some text</div>
            -->
        </form>

    </modal>
</template>

<script>

    import Vue from 'vue';

    import VModal from 'vue-js-modal';
    Vue.use(VModal);

    import rangy from 'rangy';
    import 'rangy/lib/rangy-classapplier';

    export default {

        props: [ 'exercise' ],

        /**********************************************
        ********************* Data ********************
        **********************************************/

        data: function() {
            return {
                selected:    [],
                category_id: undefined,
                text:        undefined,
                mistakes:    undefined
            };
        },


        /**********************************************
        ******************** Methods ******************
        **********************************************/

        methods: {
            sampleMethod: function() {
                console.log(this.$refs.textWithMistakes);
                console.log(document.getElementById('text-with-mistakes'));
            }
        },


        /**********************************************
        ******************* Watchers ******************
        **********************************************/

        watch: {
            /**
             * Sets up and shows modal when exercise data is loaded from parent.
             */
            exercise: function() {
                this.category_id = this.exercise.category_id;
                this.text = this.exercise.text;
                this.mistakes = this.exercise.mistakes;

                this.$modal.show('edit-mistakes-exercise-modal');

                // Not working
                this.applyClass(sampleMethod);
                
                // Working, but not a way I'd like to go
                setTimeout(() => {
                    this.applyClass(sampleMethod);;
                }, 3000);
            }
        }
    }
</script>

Answer 1

只要模态框关闭，您就无法访问模态框内的内容。但是当模式切换为可见时，vue-js-modal 组件会发出一个“打开”事件。您可以在模式打开并完成渲染时调用您的代码。

<modal 
  name='edit-exercise-modal'
  @opened="onModalOpened"
  :draggable='true'
  height='auto'
>
   ...
</modal>