vue重新加载应用程序联系人

Question

你好，

我对Vue.Js.有问题

当我在数据库中创建新行时。我将使用Vue.use(conctactApp(，但不会加载表。

我需要按CTRL+F5来刷新捕获。然后该表将重新加载新数据。

当我在localhost上测试Vue.js时，没有问题。

<tbody ref="contactTable"  v-for="user in users" id="" >
<tr>
<td>{{ user.name }}</td>
<td>{{ user.telefon }}</td>
<td>{{ user.email }}</td>
<td>{{ user.poznamka }}</td>
<td v-on:click="editContact" :contact-poznamka="user.poznamka" :contact-email="user.email" :contact-telefon="user.telefon" :contact-name="user.name" data-toggle="modal" data-target="#editcontact" ><i class="icofont-ui-edit"></i></td>
</tr>
</tbody>

---

var conctactApp = new Vue({
el:"#contactList",
data () {
return {
users: []
}
},
mounted () {
console.log("Contact App Run")
axios
.get('action.php?action=load_conctacts')
.then(response => (this.users = response.data))
},
methods: {
reloadContacts(){
Vue.use(conctactApp);
},
createContact(){
let err = false;
this.$refs.ecb.value = "Create";
SetAttrById("ecb","send-type","create");
},
editContact: function(e){
this.$refs.cContactName.value = e.currentTarget.getAttribute('contact-name');
this.$refs.cContactEmail.value = e.currentTarget.getAttribute('contact-email');
this.$refs.cContactTelefon.value = e.currentTarget.getAttribute('contact-telefon');
this.$refs.cContactPoznamka.value = e.currentTarget.getAttribute('contact-poznamka');
this.$refs.ecb.value = "Save";
SetAttrById("ecb","send-type","edit");
},
saveContact:() => {
var contactData = {
name:GetInputValueById("cContactName"),
telefon:GetInputValueById("cContactTelefon"),
email:GetInputValueById("cContactEmail"),
poznamka:GetInputValueById("cContactPoznamka"),
}
console.log(contactData);
if(GetAttrById("ecb","send-type") == "create"){


axios.post("api.php",{
action:"autoinsert",
autotable:"contacts",    
data: contactData,
}).then(function(response) {
console.log(response);
Vue.use(conctactApp);
});




}else if(GetAttrById("ecb","send-type") == "edit"){
alert("edit");
}
}
}

})

我需要每次发布新的联系人到数据库。我的表刷新，我不必按CTRL+F5我尝试强制更新，但不能太

感谢的所有帮助

Answer 1

添加联系人后不需要重新加载应用程序。添加联系人后，您可以将新联系人(用户(添加到"用户"数据数组中，也可以重新加载数据。

methods: {
getContacts() {
axios.get('action.php?action=load_contacts')
.then(response => (this.users = response.data))
},
saveContact() {
// other code
if (GetAttrById("ecb", "send-type") == "create") {
axios.post("api.php", {
action: "autoinsert",
autotable: "contacts",
data: contactData,
})
.then(function (response) {
console.log(response);
// Reload contacts here
this.getContacts();
});
}
// other code
}
},
mounted() {
this.getContacts();
}