Question

我有一个名为concepts的组件，其中包含数据和方法。

在另一个视图中，我有此组件的两个实例（我也在使用vuetify）：

// Index.vue
    <template>
  <v-card>
    <v-toolbar>
      <v-toolbar-title>Conceptos</v-toolbar-title>
    </v-toolbar>

    <v-tabs class="elevation-2" color="primary">

      <v-tab>Ordinarios</v-tab>
      <v-tab>Extraordinarios</v-tab>

      <v-tab-item :key="1">
        <concepts :is_extra="false" :key="1"></concepts>
      </v-tab-item>

      <v-tab-item :key="2">
        <concepts :is_extra="true" :key="2"></concepts>
      </v-tab-item>

    </v-tabs>  
  </v-card>
</template>

<script>
import concepts from './Concepts.vue'

export default {
  components: {
    concepts,
  },

  data() {
    return {

    }
  }
}
</script>

在概念组件中，将is_extra属性用作参数，在vue实例的created（）方法中，函数fetchAll从API正确检索数据，该参数与正确的值：

// Concepts.vue
// this works correctly
created() {
  const isExtra = this.is_extra //true or false depends of the property value
  // GET /concepts?is_extra=true  ...or false
  this.server
    .setParams({ is_extra: isExtra })
    .fetchAll()
}

我有一个名为upload的方法（用于上传文件），在这里我再次使用此属性，但是该值始终为false，始终为第一个组件

...
// Concepts.vue
methods: {
  upload() {
    const isExtra = this.is_extra // always false
    this.server.setParams({is_extra: isExtra}).upload()
  }
}

此处提供了完整的Concepts.vue组件：

<template>
  <v-data-table
    :divider="true"
    :headers="headers"
    :items="concepts">

    <template v-slot:top>
      <v-toolbar flat color="white">
        <v-spacer></v-spacer>

        <template v-if="me.caps.canUploadCsv()">
          <v-btn color="secondary" class="mr-2" dark>
            Agregar concepto
          </v-btn>

          <input type="file" class="d-none" id="csv_file" @change="confirm" accept=".csv">
          <v-btn @click="selectFile" :loading="uploading" color="green" dark>
            <v-icon left>mdi-file-upload</v-icon> Cargar CSV
          </v-btn>
        </template>

      </v-toolbar>

      <v-dialog v-model="confirmDialog" 
        @click:outside="closeConfirm" @keydown="closeConfirm" max-width="320">
        <v-card>
          <v-card-title>
            <span class="headline">Confirmar</span>
          </v-card-title>
          <v-card-text>
            ¿Desea continuar con la carga del archivo?
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="closeConfirm">
              No
            </v-btn>
            <v-btn color="primary" dark @click="uploadFile">Si</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

    </template>

    <template v-slot:item.description="{ item }">
      <span :title="item.description">
        {{ item.description.substr(0, 60) }}...
      </span>
    </template>
    <template v-slot:item.amount_formated="{ item }">
      $ {{ item.amount_formated }}
    </template>
    <template v-slot:item.iva_formated="{ item }">
      $ {{ item.iva_formated }}
    </template>
    <template v-slot:item.total_formated="{ item }">
      $ {{ item.total_formated }}
    </template>

  </v-data-table>
</template>

<script>
import { bus } from '../../app'
import User from '../../models/User'
import Concept from '../../models/Concept'

export default {
  props: ['is_extra'],

  data() {
    return {
      me: null,
      headers: [
        { text: 'Clave', value: 'code' },
        { text: 'Categoría', value: 'category' },
        { text: 'Descripción', value: 'description' },
        { text: 'Unidad', value: 'unity' },
        { text: 'Total', value: 'total_formated', align: 'end' },
      ],
      concepts: [],
      model: null,
      loaded: false,

      inputFile: null,
      confirmDialog: false,

      uploading: false,
    }
  },

  created() {
    this.me = (new User()).getMe()

   const params = this.$route.params
    this.model = new Concept(params.companyId, params.contractId)

   const isExtra = this.is_extra

   this.model.server
      .setParams({ is_extra: isExtra })
      .fetchAll(this.onSuccess)
  },

  mounted() {
    this.inputFile = document.getElementById('csv_file')
    console.log('1', this)
  },

  methods: {

    selectFile() {
      if (this.uploading) {
        return
      }
      this.inputFile.click()
    },

    confirm() {
      this.confirmDialog = true
    },

    closeConfirm() {
      this.inputFile.value = null
      this.confirmDialog = false
    },

    uploadFile() {
      console.log(this)
      this.confirmDialog = false
      this.uploading = true

      const isExtra = this.is_extra

      bus.$emit('snackbar', { color: 'info', text: 'Subiendo archivo...' })

      this.model.server
        .setParams({ is_extra: isExtra })
        .upload(null, 'csv', this.inputFile, this.onSuccess)
    },

    onSuccess(resp) {

      if (this.uploading) {
        bus.$emit('snackbar', {
          color: 'success', text: 'Conceptos actualizados correctamente'
        })
      }

      if (this.inputFile) {
        this.inputFile.value = null
      }

      this.uploading = false
      this.concepts = resp.data
    },
  }
}
</script>

当我更改标签（验证标签）时，我在创建和上传方法中放入了console.log(this)，在第一种情况下，我得到了：

VueComponent {_uid: 43, _isVue: true, ...} // created(), is_extra=false
VueComponent {_uid: 71, _isVue: true, ...} // created(), is_extra=true

但是在上载方法中（上载文件时），我得到了相同的实例：

VueComponent {_uid: 43, _isVue: true, ...} // upload() is_extra=false
VueComponent {_uid: 43, _isVue: true, ...} // upload() is_extra=false

我添加了:key属性，但是它不起作用。 Vue开发人员工具会使用正确的数据显示这两个组件。

在使用vuetify标签之前，我已经遇到了问题

有人可以帮我吗？

两个vue组件正在共享实例

0 个答案: