vue에서 경고 확인 상자를 생성하는 방법

vue에서 경고 확인 상자를 생성하는 방법

파일을 삭제하기 전에 대화 상자를 표시하고 싶은데 vue로 어떻게 해야 하나요?

내가 시도하는 것

파일 삭제 버튼

<a href="javascript:;" v-on:click="DeleteUser(artist.id, index)" onClick="return confirm('are you sure?');">Delete</a>

그리고 여기에 나의 삭제 방법이 있다.

DeleteUser(id, index) {
                axios.delete('/api/artist/'+id)
                .then(resp => {
                    this.artists.data.splice(index, 1);
                })
                .catch(error => {
                    console.log(error);
                })
            },

대화상자가 표시되지만 내가 무엇을 선택하든 파일을 계속 삭제합니다.

이거 드셔보세요

<a href="javascript:;" v-on:click="DeleteUser(artist.id, index)">Delete</a>

DeleteUser(id, index) {

   if(confirm("Do you really want to delete?")){

                axios.delete('/api/artist/'+id)
                .then(resp => {
                    this.artists.data.splice(index, 1);
                })
                .catch(error => {
                    console.log(error);
                })
   }
},

간단하게 사용if(confirm('are you sure?'))안에서.DeleteUser.

DeleteUser(id, index) {
    if(confirm('are you sure?'))
        axios.delete('/api/artist/'+id)
          .then(resp => {
          this.artists.data.splice(index, 1);
        })
          .catch(error => {
          console.log(error);
        })
},

를 삭제합니다.onClick

데모 https://jsfiddle.net/jacobgoh101/ho86n3mu/4/

Quasar Framework를 사용하는 경우 이 플러그인을 사용할 수 있습니다.글로벌하게 사용!

export default {
  methods: {
    confirm() {
      this.$q.dialog({
        title: 'Confirm',
        message: 'Would you like to turn on the wifi?',
        cancel: true,
        persistent: true
      }).onOk(() => {
        // console.log('>>>> OK')
      }).onOk(() => {
        // console.log('>>>> second OK catcher')
      }).onCancel(() => {
        // console.log('>>>> Cancel')
      }).onDismiss(() => {
        // console.log('I am triggered on both OK and Cancel')
      })
    }


  }
}

<q-btn label="Prompt" color="primary" @click="prompt" />

Quasar 대화상자

언급URL : https://stackoverflow.com/questions/54156534/how-to-create-alert-confirm-box-in-vue