저는 사용자가 평가 과제를 표에 추가하여 추적할 수 있는 학습 프로그램을 만들고 있습니다.사용자가 평가 작업을 추가하기 위해 버튼을 클릭했을 때, 프로그램이 화면 중앙에 팝업을 열어 작업에 대한 관련 정보를 입력할 수 있도록 했으면 합니다.대화상자 태그로 하려고 했는데 버튼을 사용하여 대화상자를 여는 방법을 모르겠어요.
<button class="add" @click="">Add new</button>
<br/><br/> <dialog open class="window">
<p>Subject: <input type="text" value="subjectName" placeholder="Subject" v-model="subject"></input></p> <p>Task: <input type="text" value="taskName" placeholder="Task" v-model="task"></input></p> <p>Due Date: <input type="date" value="dueDate" placeholder="Due Date" v-model="due"></input></p>
<form method="dialog"> <button @click="wholeTask.push({subject: subject, task: task, due: due}), reset()">Save</button>
</form> </dialog>지금까지 대화 상자를 div에 넣고 v-if를 사용하여 div 표시 여부를 전환하려고 시도했지만, 이는 작동하지 않았고 ‘새로 추가’ 버튼을 누른 후에는 아무 일도 일어나지 않았습니다.“@click=”syslog.dialog.show();”도 사용해 보았습니다만, 같은 문제가 발생했습니다.document.getElementById()를 사용하는 다른 웹 사이트를 읽은 적이 있습니다.‘show’라든가 뭐 그런 건데 그게 vue에서 통할지 모르겠어요.
질문에 대한 답변
new Vue({
el: '#app',
data: {
dialog: false,
subject: '',
task: '',
due: ''
},
methods: {
showDialog() {
this.dialog = true;
},
addTask() {
this.dialog = false;
}
} })dialog {
padding-bottom: 150px; }<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app">
<button class="add" @click="showDialog">Add new</button>
<br/><br/>
<dialog :open="dialog" class="window">
<p>Subject: <input type="text" value="subjectName" placeholder="Subject" v-model="subject"></input>
</p>
<p>Task: <input type="text" value="taskName" placeholder="Task" v-model="task"></input>
</p>
<p>Due Date: <input type="date" value="dueDate" placeholder="Due Date" v-model="due"></input>
</p>
<form method="dialog">
<button @click="addTask">Save</button>
</form>
</dialog> </div>