Bootstrap Vue b-table：v-if 不适用于更新的项目

Question

我在 b-table

中有一个输入字段

模板：

<template v-slot:cell(file)="data">
    <b-form-file :state="Boolean(data.item.file)" @input = 'attachFile(data.item, $event)'></b-form-file>
</template>

方法

attachFile: function (item, file) {
    item.file = file
}

但是b-form-file的状态在文件附加后没有改变。如何解决？

Answer 1

您可能需要先在 data()

中声明 item.file

这可能是使用 attachFile 更简单的方法：

<template>
  <div>
    <b-table :items="items">
      <template #cell(file)="data">
        <b-form-file :state="!!data.value" @input='attachFile(data.index)' v-model="tempFile"></b-form-file>
      </template>
    </b-table>
  </div>
</template>
<script>

export default {
  name: 'example component',
  data() {
    return {
      tempFile: [],
      items: [
        { mockData: 'Mock0', file: '' },
        { mockData: 'Mock1', file: '' },
        { mockData: 'Mock2', file: '' },
        { mockData: 'Mock3', file: '' },
        { mockData: 'Mock4', file: '' },
      ]
    };
  },
  methods: {
    attachFile(index) {
      this.items[index].file = this.tempFile;
      this.$nextTick(() => {
        this.tempFile = [];
      });
    },
  }
};
</script>

Bootstrap Vue b-table：v-if 不适用于更新的项目

BootstapVue b-table: v-if doesnt work with updated item

vue.js

bootstrap-vue