Question

我正在使用Nuxt.js并且我正在开发一个Uploader组件，我依赖于vue-upload-component full example，基本上我删除了编辑功能并实现了Vuex以进行状态管理，因此：

数据（）

中的

files: this.$store.state.files.files,

模板

中的

<file-upload
  ... others ...
  @input-filter="inputFilter"
  @input-file="inputFile"
  @input="inputUpdate"
  ref="upload">

方法

中的

inputUpdate(files) {
  this.$store.dispatch("files/setFiles", files)
},

每次添加文件时更新状态。

我有一个files.js存储模块whit变异，动作和getter工作，当用户选择文件时，存储正确更新。

export const state = () => ({
  files: []
})

我正在尝试添加自定义编辑功能： 1）当用户选择具有适当编辑按钮的文件时， 2）我会显示一些html输入，允许用户修改所选文件的某些字段

1）

<a :class="{'dropdown-item': true}" href="#" @click.prevent="onEdit(data.item)">Edit</a>

2）

methods:{
...
 onEdit(file){
      // file.id
    }
....

我想了解哪个是从商店中选择与用户选择的元素相对应的元素（比较id）的最佳方式。我想利用v-for然后依靠v-show来显示用户选择的内容，但我当前的实现不起作用。

 <b-card
  v-for="(file, id) in files"
  :key="id"
  :title="file.name"
  :sub-title="file.size"
  class="my-5">
 </b-card>

Answer 1

您应该使用计算机数据来保持反应性。

computed: {
  files () {
    return store.state.files.files
  }
}

要从商店中选择文件，有很多方法可以实现。

data: {
   selectedFile: {}
},
methods:{
   onEdit(file){
     this.selectedFile = file;
   },
   cancelEdit(){
     this.selectedFile = {};
   }
   ...
}

不要使用v-for隐藏内容

<b-card
  v-if="selectedFile.id"
  :title="selectedFile.name"
  :sub-title="selectedFile.size"
  class="my-5 selected-file">
</b-card>
<b-card
  v-else
  v-for="(file, id) in files"
  :key="id"
  :title="file.name"
  :sub-title="file.size"
  class="my-5 files">
</b-card>

根据用户操作访问Vuex状态

1 个答案: