我有一张表,其中的字段应该可以编辑。 例如:
<tr v-for="item in items">
<td>
//show by default and hide when edit button clicked
<span>{{item.value}}</span>
//show by click on edit button
<b-input :value="item.value"></b-input>
</td>
<td>
//edit button (show input field)
<span class="icon is-small" v-on:click="">
<i class="fa fa-edit"></i>
</span>
//save button (call function with axios)
<span class="icon is-small" v-on:click="">
<i class="fa fa-save"></i>
</span>
//loader (show until the axios request is complete)
<span class="icon is-small">
<i class="fa fa-pulse fa-spinner"></i>
</span>
</td>
</tr>
当我单击编辑按钮时,我应该得到输入字段,然后单击保存按钮而不是编辑按钮。当我单击保存按钮时,我应该发送axios请求并显示加载程序微调框,直到axios请求完成为止。 我需要能够同时显示所有输入。我的意思是,如果单击下一个字段进行编辑,则先前的输入也应显示。 知道怎么做吗?
答案 0 :(得分:2)
如果您可以向items
添加一些键,则可以这样做:
<tr v-for="item in items">
<td>
//show by default and hide when edit button clicked
<span v-if="!item.edit">{{item.value}}</span>
//show by click on edit button
<b-input :value="item.value" v-else></b-input>
</td>
<td>
//edit button (show input field)
<span class="icon is-small" v-on:click="handleEdit(item)" v-if="!item.edit">
<i class="fa fa-edit"></i>
</span>
//save button (call function with axios)
<span class="icon is-small" v-on:click="handleSave(item)" v-else>
<i class="fa fa-save"></i>
</span>
//loader (show until the axios request is complete)
<span class="icon is-small" v-if="item.loading">
<i class="fa fa-pulse fa-spinner"></i>
</span>
</td>
</tr>
export default {
data() {
return {
items:[
{
value: foo,
edit: false,
loading: false
},
{
value: bar,
edit: false,
loading: false
}
]
}
},
methods: {
handleEdit(item) {
item.edit = true
},
handleSave(item) {
item.edit = false
item.loading = true
axios.post(url, params)
.then(function(response) {
item.loading = false
})
.catch(function(error) {
item.loading = false
})
}
}
}