vue 구성 요소에서 링크를 사용하지 않도록 설정하는 방법

vue 구성 요소에서 링크를 사용하지 않도록 설정하는 방법

나의 html은 다음과 같다.

<div id="app">
    <a class="btn btn-danger" href="javascript:" @click="add($event)">add</a>
</div>

나의 자바스크립트는 다음과 같다.

var vue = new Vue({
    el: '#app',

    methods: {
        add(event) {
            event.target.disabled = true
        }
    }
});

다음과 같은 데모 및 전체 코드: https://jsfiddle.net/q7xcbuxd/221/

나는 그렇게 노력한다.그러나 추가 버튼을 클릭해도 사용 불가능은 없다.

어떻게 하면 이 문제를 해결할 수 있을까?

부스트랩을 사용하고 있으므로 (앵커) 버튼을 비활성화하는 적절한 방법은 설정하지 않는 것이다..disabled = true, 그러나 클래스를 추가하기 위하여.

다른 음표 두 장.의 기본 동작을 방지하려는 경우click이벤트, 그러니까 사용@click.prevent.또한, 추가적인 언쟁이 없는 경우에는, 사용할 필요가 없다.="add($event)", just.="add"충분하다

아래 데모:

new Vue({
  el: '#app',
  methods: {
    add(event) {
      event.target.className += ' disabled'
    }
  }
})

body { padding: 10px }

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="app">
  <a class="btn btn-danger" href="javascript:" @click.prevent="add">add</a>
</div>

순수한 Vue로 이동하여 클래스 바인딩을 사용할 수도 있다.

new Vue({
  el: '#app',
  data: {
    btnDisabled: false
  },
  methods: {
    add(event) {
      this.btnDisabled = true; // mutate data and let vue disable the element
    }
  }
})

body { padding: 10px }

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="app">
  <a class="btn btn-danger" href="javascript:" @click.prevent="add" :class="{disabled: btnDisabled}">add</a>
</div>

요소에 이벤트를 추가하고 기본값을 방지하십시오.

그런 다음 버튼과 비활성화된 마우스 커서로 회색으로 표시되는 사용자 지정 css 클래스를 추가하고 해당 클래스를 요소에 바인딩하십시오.

CSS:

.disabled {
  cursor: not-allowed;
  color: gray
}

HTML:

<a href=""  @click.prevent="add" :class="disabledClass" >Add</a>

JS:

computed: {
  disabledClass: () => {
    return isAddButtonDisabled ? "disabled" : ""
  }
}

event.preventDefault()를 사용하지 않도록 설정하십시오.

그리고 .csv 수식어를 사용하면 쉽게 추가할 수 있다.

@click.prevent="add($event)"

참조URL: https://stackoverflow.com/questions/49504111/how-can-i-disable-a-link-in-the-vue-component