0

再会，

我对 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 我尝试 forceupdate 但也不起作用

感谢所有帮助

4

1 回答 1

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();
}
于 2021-03-20T14:37:34.973 回答