添加一行后更新 Vue Js table
Update Vue Js table after one row was added
我尝试在添加新行后更新 table。现在可以添加新行,但我必须刷新页面才能看到新行。同样的问题我有 update/delete 方法,但我会在之后找到方法。
getCustomers() {
let url = `/customers`;
const p = axios
.get(url);
return p.then(response => {
const i = response.data.data;
return i || [];
});
},
addCustomer() {
let newCustomer = {
customer_name: this.customer_name
};
axios
.post("/customers", newCustomer)
.then(response => {
this.items = response.data;
this.$nextTick(() => {
this.$refs.modal.hide();
this.items.customer_name = response.data.customer_name;
});
})
.catch(e => {
console.log(e);
});
}
data() {
return {
items: [],
....
....
}
}
<b-table
show-empty
stacked="md"
:items="getCustomers"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
>
这适用于更新
this.$nextTick(() => {
for(let item of this.items){
if(parseInt(item.id) === parseInt(id)) {
item.customer_name = response.data.customer_name;
this.resetModal();
}
}
});
请在下面的代码中查看我的评论:
getCustomers() {
let url = `/customers`;
const p = axios
.get(url);
this.customers = p.then(response => {
const i = response.data.data;
return i || [];
});
},
addCustomer() {
let newCustomer = {
customer_name: this.customer_name
};
axios
.post("/customers", newCustomer)
.then(response => {
this.items = response.data;
this.$nextTick(() => {
this.$refs.modal.hide();
this.items.customer_name = response.data.customer_name;
this.customers.push(response.data) // something like this can help
});
})
.catch(e => {
console.log(e);
});
}
data() {
return {
items: [],
customers: [] // add this to make reactive
}
}
mounted() {
this.getCustomers(); // run the function when page/component mounted
}
<b-table
show-empty
stacked="md"
:items="customers"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
>
我找到了一种方法来重新呈现来自 table 的数据。
将 v-if="renderComponent" 添加到 < b-table >
data() {
return {
renderComponent: true,
};
},
创建新方法:
forceRerender() {
this.renderComponent = false;
this.$nextTick(() => {
this.renderComponent = true;
});
}
我在活动结束后使用 forceRerender();,效果很好。
我尝试在添加新行后更新 table。现在可以添加新行,但我必须刷新页面才能看到新行。同样的问题我有 update/delete 方法,但我会在之后找到方法。
getCustomers() {
let url = `/customers`;
const p = axios
.get(url);
return p.then(response => {
const i = response.data.data;
return i || [];
});
},
addCustomer() {
let newCustomer = {
customer_name: this.customer_name
};
axios
.post("/customers", newCustomer)
.then(response => {
this.items = response.data;
this.$nextTick(() => {
this.$refs.modal.hide();
this.items.customer_name = response.data.customer_name;
});
})
.catch(e => {
console.log(e);
});
}
data() {
return {
items: [],
....
....
}
}
<b-table
show-empty
stacked="md"
:items="getCustomers"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
>
这适用于更新
this.$nextTick(() => {
for(let item of this.items){
if(parseInt(item.id) === parseInt(id)) {
item.customer_name = response.data.customer_name;
this.resetModal();
}
}
});
请在下面的代码中查看我的评论:
getCustomers() {
let url = `/customers`;
const p = axios
.get(url);
this.customers = p.then(response => {
const i = response.data.data;
return i || [];
});
},
addCustomer() {
let newCustomer = {
customer_name: this.customer_name
};
axios
.post("/customers", newCustomer)
.then(response => {
this.items = response.data;
this.$nextTick(() => {
this.$refs.modal.hide();
this.items.customer_name = response.data.customer_name;
this.customers.push(response.data) // something like this can help
});
})
.catch(e => {
console.log(e);
});
}
data() {
return {
items: [],
customers: [] // add this to make reactive
}
}
mounted() {
this.getCustomers(); // run the function when page/component mounted
}
<b-table
show-empty
stacked="md"
:items="customers"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
>
我找到了一种方法来重新呈现来自 table 的数据。
将 v-if="renderComponent" 添加到 < b-table >
data() {
return {
renderComponent: true,
};
},
创建新方法:
forceRerender() {
this.renderComponent = false;
this.$nextTick(() => {
this.renderComponent = true;
});
}
我在活动结束后使用 forceRerender();,效果很好。