Sending information to a single component among several

Question

Sending information to a single component among several

I'm developing a custom DownloadButton component in VueJS that features an animation when clicked and stops animating once the download is complete. The DownloadButton will be utilized within a table where it's replicated multiple times. I intend to keep the download functionality within the parent component. However, the issue arises when changing the loading state affects all instances of the DownloadButton rather than just the one that was clicked.

Parent Component:

<DownloadButton @click.native="download" :loading="loading"></DownloadButton>
<DownloadButton @click.native="download" :loading="loading"></DownloadButton>
<DownloadButton @click.native="download" :loading="loading"></DownloadButton>

methods: {
   download() {
       this.loading = true
       // waiting for the download process to complete...
       this.loading = false
   }
}

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Make sure to keep an eye on the loading status of every single button, not only the overall loading state.

Here's a simple and fast example that demonstrates what you're looking for:

Vue.component("download-button", {
template: "#dbTemplate",
  props: ['loading'],
  computed: {
  stateText() {
        return this.loading ? 'Loading...' : 'Load';
    }
  }
});

new Vue({
  el: "#app",
  data: {
    resources: [
    { date: new Date(), url: "some-url1" },
      { date: new Date(), url: "some-url2" },
      { date: new Date(), url: "some-url3" },
      { date: new Date(), url: "some-url4" }
    ],
    resourceStates: {}
  },
  methods: {
  downloadResource(resource) {
    this.$set(this.resourceStates, resource.url, true);
    new Promise((resolve, reject) => {
          setTimeout(() => resolve(new Date()), 1000);
      }).then((date) => {
      resource.date = date;
      this.$set(this.resourceStates, resource.url, false);
      })
    },
    isLoading(resource) {
    return !!this.resourceStates[resource.url];
    }
  }
});

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94e2e1f1d4a6baa1baa5a2">[email protected]</a>/dist/vue.js"></script>
<div id="app">
  <div v-for="res in resources" :key="res.url" style="padding: 10px 0">
    {{ res.date.toLocaleString() }}&nbsp;
    <download-button  @click.native="downloadResource(res)" :loading="isLoading(res)">
    </download-button>
  </div>
</div>

<script type="text/template-x" id="dbTemplate">
<button :disabled="loading">
  {{ stateText }}
</button>
</script>

Answer 2

Make sure to keep an eye on the loading status of every single button, not only the overall loading state.

Here's a simple and fast example that demonstrates what you're looking for:

Vue.component("download-button", {
template: "#dbTemplate",
  props: ['loading'],
  computed: {
  stateText() {
        return this.loading ? 'Loading...' : 'Load';
    }
  }
});

new Vue({
  el: "#app",
  data: {
    resources: [
    { date: new Date(), url: "some-url1" },
      { date: new Date(), url: "some-url2" },
      { date: new Date(), url: "some-url3" },
      { date: new Date(), url: "some-url4" }
    ],
    resourceStates: {}
  },
  methods: {
  downloadResource(resource) {
    this.$set(this.resourceStates, resource.url, true);
    new Promise((resolve, reject) => {
          setTimeout(() => resolve(new Date()), 1000);
      }).then((date) => {
      resource.date = date;
      this.$set(this.resourceStates, resource.url, false);
      })
    },
    isLoading(resource) {
    return !!this.resourceStates[resource.url];
    }
  }
});

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94e2e1f1d4a6baa1baa5a2">[email protected]</a>/dist/vue.js"></script>
<div id="app">
  <div v-for="res in resources" :key="res.url" style="padding: 10px 0">
    {{ res.date.toLocaleString() }}&nbsp;
    <download-button  @click.native="downloadResource(res)" :loading="isLoading(res)">
    </download-button>
  </div>
</div>

<script type="text/template-x" id="dbTemplate">
<button :disabled="loading">
  {{ stateText }}
</button>
</script>

Sending information to a single component among several

Answer №1

Similar questions

Place the div's scrollbar at the beginning of its content

VueJS - Input Image Display Issue Causing Browser Slowdown

I'm struggling to understand the folder arrangement and the system is telling me it can't locate my file

Ways to recycle a section of Javascript for multiple uses on a single page

Is there a way to view Deno's transpiled JavaScript code while coding in TypeScript?

Is relying on getState in Redux considered clunky or ineffective?

Is it possible to send an entire HTML table to the server and then update the database table with it?

Performing function in Vue.js when a change occurs

Utilizing Node Js and Socket.Io to develop a cutting-edge bot

Exploring the power of $j in JavaScript

What is the process for releasing an NPM package to the NPM registry rather than the GitHub registry?

Unable to establish connection to MongoHQ using Node.js connection URL

Alert box in Vue.js

"An error message is displayed stating that the maximum call stack size has been exceeded while looping through an

What is the best way to prevent handleSubmit from triggering a re-render when moved to a different

What is the reason that the index is consistently the final index when utilizing it to pass to a function while iterating over an array with map()?

Bug in Async.js causes unexpected results in loop involving numbers

How to retrieve the changing input value in ReactJS using Jquery/JS

Migration processes encountering delays due to running nodes

Link the Sass variable to Vue props