Передача данных в один из множества компонентов - PullRequest
0 голосов
/ 26 мая 2018

Я пытаюсь создать компонент DownloadButton в VueJS, который анимируется при нажатии и прекращает анимацию после завершения загрузки.Компонент DownloadButton будет использоваться в таблице, где он повторяется много раз.Я хочу, чтобы метод загрузки содержался в родительском.Проблема в том, что изменение переменной загрузки приводит к тому, что затрагиваются все компоненты, а не только тот, по которому щелкают.

Родитель:

<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
       // wait for the download procedure to finish...
       this.loading = false
   }
}

1 Ответ

0 голосов
/ 26 мая 2018

Вы должны отслеживать состояние загрузки каждой кнопки , а не только глобальную загрузку.

Вот быстрый и простой пример того, что вы хотите, я думаю:

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/vue@2.5.16/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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...