Question

我几个月来一直非常愉快地使用VueJS。另外，Elements UI包很棒！因此class="el-button"使链接看起来像一个按钮。

我已经创建了许多自定义组件而没有问题，但是，我创建了一个简单的下载按钮，当每个DIV有一个（我怀疑）时，一切都很好。我有一个复杂的表格，有很多面板，所有工作都很好，但是当同一部分有两个时，它会反映出反应性。

然而，经过一番非常奇怪的错误，我在同一页面上有两个下载按钮后，第二个没有看到传递给它的道具，它变得混乱了第一个下载按钮的道具。

我显然做错了什么，但对于我的生活，却看不到。

该组件的基本原理是从Laravel后端下载文件，该文件是用户之前上传的。

AjaxMixins是对后端的axios次调用的包装。

该组件的完整代码如下：

<template>
  <div>
    <div v-if="!fileName">
      <i @click="this.console.log('DL fileList', fileList, 'current', current, 'files', files)">{{text}} not available</i>
    </div>
    <div v-else>
      <strong><a class="el-button" :href="url"
        :download="fileName">
        <i :class="'el-icon-' + icon"></i>{{text}} - {{fileName}} </a></strong>
    </div>

  </div>
</template>

<script>

import AjaxMixins from '@/mixins/AjaxMixins'

export default {
  mixins: [AjaxMixins],

  props: {
    fileList: {
      type: Array,
      required: true
    },

    text: {
      type: String,
      default: 'Download'
    },

    icon: {
      type: String,
      default: 'view'
    },

    type: {
      type: String,
      default: 'plain'
    },

    disabled: {
      type: Boolean,
      default: false
    },

    afterDownload: {
      type: Function
    }
  },

  data () {
    return {
      isDisabled: this.disabled,
      files: this.fileList
    }
  },


  computed: {

    current: function () {
      return (this.files && this.files.length > 0) ? 0 : null
    },

    url: function () {
      if (typeof this.current === 'number' && this.files[this.current].response) {
        return this.getEndpoint('file/download/' + this.files[this.current].response.path + '/' + this.fileName)
      } else {
        return null
      }
    }, // url


    fileName: function () {
      if (typeof this.current === 'number') {
        return this.files[this.current].name
      } else {
        return null
      }
    }
  },

  mounted () {
    this.files = this.fileList
  }
}

</script>

我注意到的是，虽然fileList道具正确显示，但由于某些原因，files本地版本没有任何内容。

VueJS - 自定义组件反应性消失

0 个答案: