No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Buttons override each others' functionality

    Help
    2
    3
    43
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      RandomDeveloper last edited by 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?

      1 Reply Last reply Reply Quote 0
      • R
        RandomDeveloper last edited by

        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>
        
        1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman last edited by 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

          1 Reply Last reply Reply Quote 0
          • First post
            Last post