Как добавить условие в тег кнопки? (Vue.js 2)

Question

Мой код компонента, как это:

... 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    ... 
    <script> 
     import { mapGetters } from 'vuex' 
     export default{ 
      props:['idProduct'], 
      computed: { 
       ...mapGetters([ 
        'status' 
       ]) 
      }, 
      ... 
    </script> 

Я хочу, чтобы добавить условие в теге кнопки. Поэтому, когда статус = успех, кнопка выглядит следующим образом:

<button type="button" class="btn btn-default" @click="reloadProduct">Close</button> 

Когда статус = ошибка, кнопка выглядит следующим образом:

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

значений состояния взяты из компонента сценария тега (см вычисленная)

Я стараюсь, как это:

<button type="button" class="btn btn-default" {{ status == 'success' ? @click="reloadProduct" : data-dismiss="modal"}}> 
    Close 
</button> 

Но это не работает

Как это сделать?

Answer 1

Вы не можете связать слушатель событий динамически,

но вы можете создать еще одну функцию и обнаружить success статус, как это:

<button type="button" class="btn btn-default" @click="doSomething">Close</button> 

<script> 
    import { mapGetters } from 'vuex' 
    export default { 
     props:['idProduct'], 
     computed: { 
      ...mapGetters([ 
       'status' 
      ]) 
     }, 
     methods: { 
      doSomething(evt) { 
       if (this.status === "success") { 
        // Call the reloadProduct() when the status is `success`. 
        reloadProduct() 
        // Remove the `data-dismiss` attribute of the button. 
        evt.target.removeAttribute("data-dismiss") 
       } else { 
        // Add the `data-dismiss` attribute for the button. 
        evt.target.setAttribute("data-dismiss", "modal") 
        // Uncomment this if you're trying to close the modal. 
        // $('#modal').modal('hide'); 
       } 
      } 
     } 
     ... 
</script> 

EDIT: Похоже, вы хотите, чтобы закрыть модальный Bootstrap , то вы можете раскомментировать $('#modal').modal('hide'); в функции doSomething().

Answer 2

Это может быть не лучший ответ, но это обходной путь.

if (status === success) { 
    document.getElementById("yourDivHere").innerHTML = 
    '<button type="button" class="btn btn-default" @click="reloadProduct"> 
     Close 
    </button>' 
}; 

и

if (status === success) { 
    document.getElementById("yourDivHere").innerHTML = 
    '<button type="button" class="btn btn-default" data-dismiss="modal"> 
     Close 
    </button>' 

Более конкретно, вы могли бы использовать JQuery, как это:

$(this).attr("your attribute", "your value");