라인이 종료

Question

I 양식을 제출하기 위해 다음과 같은 기능을 가지고 :

drawing 변수는 같은 my_form 내에서 입력에 할당

methods: { 
    submit_form: function() { 
    this.drawing = dat.toImage(); 
    this.$refs.my_form.submit() 
    } 
} 

:

<input type="text" name="doodle" :value="drawing"> 

문제는 this.drawing이 dat.toImage() 값으로 업데이트되기 전에 양식이 전송되고 있다는 것입니다. 실제로, 만약 두로 이전 기능을 분할 :

methods: { 
    submit_form: function() { 
    this.$refs.my_form.submit() 
    }, 
    set_drawing: function() { 
    this.drawing = dat.toImage() 
    } 
} 

을 내가 set_drawing() 다음 submit_form() (두 개의 서로 다른 버튼)를 먼저 실행하면, 다음 양식이 제대로 업데이트 된 도면 값으로 전송됩니다. 따라서 두 가지 행이 같은 함수에있을 때 어떤 이유로 인해 이전 행의 실행이 끝나기 전에 양식이 전송됩니다.

왜 이런 일이 발생하고 어떻게 해결할 수 있는지에 대한 아이디어가 있습니까?

UPDATE :이 중 하나가 작동하지 않습니다

, 널 값 형태로 전송됩니다.

data: { 
    drawing: null 
} 
methods: { 
    submit_form: function() { 
    this.drawing = dat.toImage(); 
    while (this.drawing == null) { 
     false 
    } 
    this.$refs.my_form.submit() 
    } 
} 

는 내가 가진 drawing를 초기화 어떤 값 형태로 전송되는 값입니다 보인다. 사실 나는 웹 사이트에 drawing의 값을 표시하고 있습니다. 제출을 클릭하면 변경 사항이 표시되지만 위의 루프는 끝나지 않습니다.

.toImage 메소드는 atrament.js 라이브러리에 속합니다.

<form method="POST" class="model-form" v-on:submit.prevent="submit_form()" ref="my_form"> 

Answer 1

이 아직 완료되지 않은 상태에서 자바 스크립트가 다음 방법을 실행을 시작할 수 있도록 dat.toImage()는, 비동기 방법 것 같다 : 또한

는, 내가 제출 이벤트를 잡을 수 있습니다. 이것이 자신의 방법이라면이 함수에서 약속을 되돌릴 수 있고이 약속의 결심에 따라 두 번째 방법을 호출 할 수 있습니다.