Javascript 两个vue组件正在共享一个实例

我有一个名为

concepts

的组件及其数据和方法

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

我有一个名为

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>

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

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

我添加了

：key

属性，但它不起作用。 Vue devtools使用正确的数据显示这两个组件

在使用vuetify选项卡之前，我已经遇到了这个问题

---

有人能帮我吗

Prob必须向我们展示整个组件。。很难说为什么会发生这种情况。@MattOestreich抱歉，我添加了帖子，整个组件。在我的脑海中，我会尝试控制台。在不同的地方记录是额外的道具/生命周期挂钩也会尝试并缩小到底发生了什么。无论如何，我会尝试发布更多代码以获得更好的帮助。@Heyrio没有更多相关代码。但是你的想法对我有帮助。我发现错误发生在选择文件时。我为每个组件的输入文件添加了不同的Id。非常感谢你。@MarcoAntonio我很高兴你找到了答案！

<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>

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