时间戳

首页 > 解决方案 > 直接在组件标签中编辑子组件的 props 值

javascript - 直接在组件标签中编辑子组件的 props 值

问题描述

我有一个带有库 element.io 的按钮：

<el-button type="primary" @click="onSubmit()" icon="el-icon-check" :loading="false">Sauvegarder</el-button>

我的应用程序上有很多这样的按钮，我想在点击时将加载更改为 true。

我知道我可以:loading="loading_button1"在提交时进行更改，但这不是正确的方法。

谢谢 ！

标签： javascripthtmlvue.jsvuejs2vue-component

解决方案

尝试创建一个名为的数组loadings，其中包含每个按钮的初始加载状态，如下所示：

new Vue({
  el: '#example',
  data: {
    loadings: {
    1:false,
     2:false,
      3:false,
       4:false
    }
    
  },
  methods:{
     onSubmit(){}
  }
})
#example{
padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id='example'>
 <el-button type="primary" @click="loadings[1]=true" icon="el-icon-check" :loading="loadings[1]">Sauvegarder</el-button>
  <el-button type="primary" @click="loadings[2]=true" icon="el-icon-check" :loading="loadings[2]">Sauvegarder</el-button>
  <el-button type="primary" @click="loadings[3]=true" icon="el-icon-check" :loading="loadings[3]">Sauvegarder</el-button>
    <el-button type="primary" @click="loadings[4]=true" icon="el-icon-check" :loading="loadings[4]">Sauvegarder</el-button>
</div>

推荐阅读