Buttons override each others' functionality

RandomDeveloper

Hey everyone,

I’m very new to front-end development. It’s very likely I’m doing something terribly wrong.

My issue is:
I have an issue where the @click handler of a button in a custom component is always set to the @click handler of the last instance of that component.

My component looks like this:

<template>
<div :id="window_name+'maindiv'" class="draggable">
    <q-card :id="window_name+'maincard'" style="width:100%;height:100%;">
      <q-card-section>
        <div :id="window_name+'maindivheader'" class="draggableHeader text-h6">window: {{window_name}} Type: {{window_type}}</div>
      </q-card-section>
      <q-card-section>
        <div id="container">
            <pre class="windowoutput" style="height: 28vh;width: 50vw;">
{{window_lines}}
          </pre>
       </div>
      </q-card-section>
        <q-btn type="button" flat label="Close" :id="window_name+'closebutton'" @click="window_close" />
    </q-card>
</div>
</template>

And window_close looks like:

window_close(params)
    {
        var self = this;
        console.log("Self.windowid: " + self.window_name)
        clearInterval(self.window_read_timer);
        self.window_read_timer = null;
        self.close_callback(self.window_name)
    },

For example when I have 2 instances of the window component in a page like this:

    <!-- Floating window template -->
    <template v-for="(window_object) in window_tabs_open">
      <windowModal v-bind:key="window_object.name" v-bind:close_callback="window_menu_close_window" v-bind:parent_window_id="window_object.parent_window_id" v-bind:window_type="window_object.window_type" v-bind:window_name="window_object.window_name" />
    </template>
    <!-- Floating window template -->

And I click on the close button of the first window that was opened the second window closes instead!

Can anyone point me in the right direction? Or does anyone know why the button’s handler is overwritten with the most recent button added?

RandomDeveloper

I think I found the problem, or at least a way to fix this in my particular case. In my for loop in the template at the bottom I did not give each element a unique id. And the v-bind:key is passed an undefined value.

In the end it looks like:

<template v-for="(window_object) in window_tabs_open">
    <windowModal :id="window_object.window_name+window_object.parent_window_id" v-bind:key="window_object.window_name" v-bind:close_callback="window_menu_close_window" v-bind:parent_window_id="window_object.parent_window_id" v-bind:window_type="window_object.window_type" v-bind:window_name="window_object.window_name" />
</template>

metalsadman

@RandomDeveloper if you’re not doing anything with the key you can just use the index. ie. v-for"(window_object, index) in window_tabs_open)">...<window-modal :key="index" .... further reading https://vuejs.org/v2/guide/list.html#v-for-with-an-Object