VueJS two same components in a file, data change in one changes other's data?

Question

I have created a VueJS component for dropdown.

<template>
    <div>
        <select v-bind:value="value" v-on:input="$emit('input', $event.target.value)">
            <option v-for="(option, index) in dropdownOptions"
                    v-bind:key="index">
                {{ option }}
            </option>
        </select>
    </div>
</template>


<script>
export default {
    props: {
        dropdownOptions: Array,
        value: String
    },
    mounted() {
        this.value = this.dropdownOptions? this.dropdownOptions[0] : ""; 
    }
}
</script>

And I have used it in parent as -

<div id="selectvideodropdown" class="col">
    <Dropdown v-bind:dropdown-options="allVideos" v-model="selectedVideo">                     
    </Dropdown>
</div>
<div id="selectvideodisplaymode" class="col">
     <Dropdown v-bind:dropdown-options="allDisplayMode" v-model="selectedDisplayMode">                     
     </Dropdown>
</div>

Parent's script -

<script>
    import VideoPlayer from "./Videoplayer.vue"
    import Dropdown from "../shared/Dropdown.vue"

    export default {
        components: {
            VideoPlayer,
            Dropdown
        },
        data() {
            return {
                allVideos: ["Video 1", "Video 2", "Video 3"],
                allDisplayMode: ["With Bounding Box", "Without Bounding Box"],
                selectedVideo: "",
                selectedDisplayMode: "",
            }
        }
    }; 
</script>

Weirdly, when I select the dropdown, it changes the current value of other dropdown to empty string. It only happens once after page load, and is not repeated again.

You're modifying your prop `value`. Don't do that. – Steven B. Dec 28 '19 at 21:18 — Steven B., Dec 28 '19 at 21:18

score 1 · Answer 1 · answered Dec 28 '19 at 22:22

There are several issues here.

So, first, I’d recommend reading this which should help illuminate how v-model works.

Now, notice that v-model basically creates a two-way binding between data and a value attribute.

There’s a lot going on all at once, but the basic gist of it is that you’ve got data in your parent component that’s being bound to the value, but when you initialise each component you’re manually setting the value. When Vue updates everything, it ends up resetting the bound attribute in the other dropdown to the value being passed in from its v-model, which happens to be the empty string.

However, as a commenter mentioned, you’re also altering a property in the child component as if it were a data attribute, which is a very bad idea. Make that a separate data value.

VueJS two same components in a file, data change in one changes other's data?

1 Answers1