时间戳

首页 > 解决方案 > 创建表后如何立即更新 Vue.js 中的 UI

javascript - 创建表后如何立即更新 Vue.js 中的 UI

问题描述

我有一个简单的组件，它调用数据库、检索表列表并在用户单击按钮时创建一个新表。我的功能目前有效，唯一的问题是我必须重新加载页面才能查看更新表的列表，并且我希望新创建的表在用户创建后立即显示，我该如何实现？这是我的尝试：

<md-button class="view-captable-btn" v-for="item in capTables" :key="item.contractAddress">
  <p>{{item.label}}</p>
  <p class="contract-address-p"> {{item.contractAddress}}</p>
</md-button>

<md-dialog-actions>
  <md-button class="close-btn" @click="showDialog = false"><span class="close-btn-span">Cancel</span></md-button>
  <md-button class="create-cap-table-btn" @click="showDialog = false; createNewCapTable()"><span class="add-captable-span">Add new cap table</span></md-button>
</md-dialog-actions>

data() {
    const apiKey = process.env.VUE_APP_API_ADMIN_KEY;
    
      return {
          showDialog: false,
          createNewShareholderDialog: false,
          services: new this.$service(apiKey),
          capTables: null,
          initialPoolOptions: ''
      }
  },
  methods: {
      async createNewCapTable() {
        let label = this.$refs.form.platformName.value
        let poolSize = this.$refs.form.poolSize.value
        let res = await this.services.deployStockCapTable('http://vue.js', poolSize, label)
        console.log(res)
      }, 

      logout() {
      this.$router.push('/')
      },

      async readDeployedCapTables() {
         let res = await this.services.readAllStockCapTables();
         this.capTables = res
      },
  },
    mounted() {
      this.readDeployedCapTables()
    },
     created() {
     document.body.style.background = '#e5e5e5';
  },
  beforeDestroy() {
    document.body.style.background = 'white';
  },
  
}

标签： javascriptvue.js

解决方案

您只需要将ie推res入源代码v-forcapTables


    async createNewCapTable() {
       let label = this.$refs.form.platformName.value
       let poolSize = this.$refs.form.poolSize.value
       let res = await this.services.deployStockCapTable('http://vue.js', poolSize, label)
       console.log(res)
       this.capTables.push(res) // <- this line 
    },

推荐阅读