观看任务并再次获取任务 - Vuejs

Question

我在创建任务并将其发送到数据库时遇到问题。然后我想要数据，换句话说，使用“Watch”从数据库中获取任务（没有设置超时/有没有办法？在我这里的示例中，我使用 set timeout 来更新并再次获取任务列表，但我想用 Watch 来完成应用

var Todo = new Vue({
  el: ".container",
  data() {
    return {
      tasks: [],
      selectTask: { tasktitle: "", taskcontent: "" },
      addTask:{ tasktitle: "", taskcontent: "" },
    }
  },
  computed: {
    validatelengthleeter(){
      if(this.addTask.tasktitle.length>65)
      return "Ist zu lang"
    }
  },
    validatelengthleeterbutton(){
      if(this.selectTask.tasktitle.length>65)
      this.$refs.taskan.style.color="red"
    },
  mounted () { 
    this.showTask();
  },
  methods: {

    showTask() { 
      axios
        .get("http://localhost/todolistefinalauflocal/db.php?action=read")
        .then((dieDaten) => {
          console.log(dieDaten.data);
          
          this.tasks = dieDaten.data.tasken;
        });
    },
    createTask() {
      let formData = this.convertToFormData(this.addTask);
      axios
        .post(
          "http://localhost/todolistefinalauflocal/db.php?action=create",
          formData
        )
        .then((dieDaten) => {});
        //V-modell entleeren
       this.selectTask.tasktitle=""
       this.selectTask.taskcontent="";
       setTimeout(this.showTask,3)
       this.addTask = { tasktitle: "", taskcontent: "" };

    },
    // deleteTask(taskid) {
    //   console.log(id)
    //   let formData = this.convertToFormData(taskid);
    //   axios
    //     .post(
    //       "http://localhost/WhattoDOliste_VUE/db.php?action=delete",
    //       formData
    //     )
    //     .then(function (respons) {
    //       this.selectTask = { tasktitle: "", taskcontent: "" };
    //     });

    // },
    deleteTasks(taskid) {
      // console.log(taskid)
      let formData = this.convertToFormData({ 'taskid': taskid });

      axios
          .post(
           "http://localhost/todolistefinalauflocal/db.php?action=delete",
           formData
          )
          .then(function (respons) {
             this.selectTask = { tasktitle: "", taskcontent: "" };
          });
          setTimeout(this.showTask,3)

  },
  

    convertToFormData(data) {
      let fd = new FormData();
      for (value in data) {
        fd.append(value, data[value]);
      }
      return fd;
    },

  },
});

HTML

    <!DOCTYPE html>
    <html>
    
    <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="style.css">
    </head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <body>
    
       <div style="text-align: center;"></div>
    
    
       <section>
    
    
          <div class="container">
    
             <!-- LEFT LINKS يمين -->
    
             <div class="left">
                <a href="index.html">
                   <h2>To Do List</h2>
                </a>
                <div class="cover">
                   <div class="inputs" v-if="selectTask">
                      <form action="" method="post">
                      <input type="text" id="myInput" placeholder="add Task.." name="tasktitle" v-model="addTask.tasktitle">
                      <textarea name="" id="note" cols="30" rows="5" placeholder="Notiz"
                      name="taskcontent" v-model="addTask.taskcontent"></textarea>
                   </div>
                   <div class="btns">
                      <button @click.prevent="createTask()" ref="taskan" v-if="addTask.tasktitle"  > <i class="fa fa-plus"></i>Add Task</button>
                      <!-- <button  @click="" > <i class="fa fa-trash" ></i> Delete all</button> -->
                      <!-- <button > <i class="fa fa-file-pdf-o"> </i>Download as PDF </button> -->
    
                   </div>
                </form>
                </div>
              
    
          <div v-if="!addTask.tasktitle" id="Warnung" >Bitte einen Task eintragen</div>
          <div v-if="validatelengthleeter" id="Warnung" >{{validatelengthleeter}}</div>
    
            <!--
          <a href="#" id="Warnung" v-on:click="showEditModal=true, chooseUser(user)==''" >Bitte einen Task eintragen</a>
    
    
                   <div id="empfehlung">asdasdasdasd</div>  -->
    
    
             </div>
    
             <!-- RIGHT RECHTS يمين -->
             <div class="right">
                <div class="back">
                   <ul id="myUL" v-for="task in tasks" :key="task.taskid" v-if="task">
                      <!-- <button name="deleteTask"  @click="deleteTasks(task.taskid)"> DELETE </button> -->
    
                         <li  @click="task.status =!task.status" :key="task.taskid"> <p> {{task.tasktitle}}</p>
                            <span class="trush" name="delete" @click="deleteTasks(task.taskid)"> <i class="fa fa-trash"></i></span>
                            <!-- <span class="okay" @click="erledigt"> <i class="fa fa-check"></i> </span> -->
    
                         <p v-if="!task.status">  {{task.taskcontent}}  {{showTask}} </p>
                      </li>
                </div>
    
             </div>
    
          </div>
       </section>
    
    
    
    
       <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
       <script src="app.js"></script>
    
    
    </body>
    
    </html>

DB.php


    <?php

//quelle: https://www.php.net/manual/de/mysqli.construct.php
$conn=new mysqli("localhost", "root", "", "todoliste");
//quelle https://www.php.net/manual/de/mysqli.connect-error.php
if($conn->connect_error){
    error_log('Connection error: ' . $conn->connect_error);

}

$result=array("erorr"=>false);
$action="";
if(isset($_GET["action"])) {
    $action=$_GET["action"];
}


//Daten Lesen قراءة او استدعائ المهام Read Date

if($action =="read"){
    $sql=$conn->query("SELECT * FROM tasks");
    $tasken=array();
    while($row=$sql->fetch_assoc()){
        array_push($tasken,$row);
    }
    $result["tasken"]=$tasken;
}


//Task anelegen   انشاء مهمة Create Task

if($action =="create"){
    $tasktitle=$_POST['tasktitle'];
    $taskcontent=$_POST['taskcontent'];
    
    //هون انشاء البيانات
        $sql=$conn->query("INSERT INTO tasks (tasktitle,taskcontent)VALUES('$tasktitle','$taskcontent')");

}

//Task löschen
//   حذف المهمة
// Remove  Task

if($action =="delete"){
    $taskid=$_POST['taskid'];

    $sql=$conn->query("DELETE FROM tasks WHERE `taskid` = $taskid");
    // echo $sql;
 
 }  

 
// //Task bearbeiten   تعديل الواجب  Upadate Date

// if($action =="update"){
//     $id=$_POST["id"];
//     $tasktitle=$_POST["tasktitle"];
//     $taskcontent=$_POST["taskcontent"];

//     //هون تعديل  البيانات

//     $sql=$conn->query("UPADATE tasks SET tasktitle='$tasktitle',taskcontent='$taskcontent',statue='$statue' WHERE id='$id' ");


// }






$conn->close();
echo(json_encode($result));

?>

Answer 1

您需要等待回复：

async showTask() { 
  await axios
    .get("http://localhost/todolistefinalauflocal/db.php?action=read")
    .then((dieDaten) => {
      console.log(dieDaten.data);
      
      this.tasks = dieDaten.data.tasken;
    });
},
async createTask() {
  let formData = this.convertToFormData(this.addTask);
  await axios
    .post(
      "http://localhost/todolistefinalauflocal/db.php?action=create",
      formData
    )
    .then((dieDaten) => {});
    //V-modell entleeren
   this.selectTask.tasktitle=""
   this.selectTask.taskcontent="";
   await this.showTask()
   this.addTask = { tasktitle: "", taskcontent: "" };

},

观看任务并再次获取任务 - Vuejs

Watch the the Tasks and fetch the Task again - Vuejs

php

mysql

watch

vue.js

vuejs3