1

我有以下内容，我可以使用 v-if 指令切换表单（显示/隐藏）。当我切换表单时，我注意到了两个异常。

第一个异常是当我关闭表单然后重新打开它时，如果我添加评论，axios 正在提交多个请求？

其次，使用 v-if 指令完全破坏表单元素并重建它。这意味着一旦表单被切换即销毁和重建，我就无法在表单上使用任何 jquery 验证。

任何想法为什么 axios 在切换表单后会以这种方式表现？

我知道我可以使用 v-show 指令而不是 v-if 来防止表单元素被破坏，但是还有其他方法可以显示隐藏表单并仍然使用 jquery validate。如果我将表单移动到组件中，v-if 指令是否仍然具有相同的效果，即阻止我使用 jquery validate？

<div v-if="threadClosed">
       This thread is now closed
 </div>
 <div v-else>
      <form id="form" method="post" v-on:submit.prevent="add">
           <textarea v-model="newComment" id="comment"></textarea>
           <button type="submit">Submit</button>
      </form>
 </div> 

 <a href="#" v-on:click.prevent="close">close</a> | <a href="#" v-on:click.prevent="open">open</a>

 <script>
 var vm =  new Vue({
    el: '#root',
    data: {
       threadClosed: false,
       newComment: '',
       comments: [
            {
              "id": 2,
              "comment": "blah...",
            },
            {
              "id": 4,
              "comment": "blah...",
            }
            {
              "id": 6,
              "comment": "blah...",
            }
       ]
     },
     methods: {
           add: function (comment) {

              if (!$('#form').valid()) return false;

              axios.post("api/thread/add", { comment: newComment })
               .then((response) => {
                      $("#clear-dropzone").click();
                    this.comments.push(response.data);
              });
           },
           close: function () {
              axios.post("api/thread/close").then((response) => {

                    this.threadClosed = true
              });
           },
           open: function () {
              axios.post("api/thread/open").then((response) => {
                    this.threadClosed = false
              }); 
           }
     }
  });     
 </script>
4

0 回答 0