How can I get the values in real time without using the event bus?

I want to get the value of the drop-down list in real time.

When I use the following method, I get the desired result.

<template>
    <div>
        <select id="jsmode" @change="handleOnChange($event)">
            <option value="1" selected>one</option>
            <option value="2">two</option>
            <option value="3">three</option>
        </select>
    </div>
</template>

<script>
export default {
    name: 'drop-down-list',
    methods: {
        handleOnChange: function (e) {
            const mode = document.getElementById('jsmode').value
            console.log('abcd: ' + mode)
        }
    }
}
</script>

However, if you divide this into different codes and write them down, only 1 is returned, but the value does not change.

The name of this code is dropdownlist.vue

<template>
    <div>
        <select id="jsmode" @change="handleOnChange($event)">
            <option value="1" selected>one</option>
            <option value="2">two</option>
            <option value="3">three</option>
        </select>
    </div>
</template>

The name of this code is firestore.dao.js

        const mode = document.getElementById('jsmode').value
        console.log('abcd: ' + mode)

In this way I separated the code.

There is also a way to use the event bus, but I have been told the following.

Although the selectPosts method works asynchronously, it is not always running, so it is not good to use the event bus to adjust variable values. Use the normal method of calling selectPosts(...some params) by changing only the parameters to be passed.

How can I get the values in real time without using the event bus?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW