Vue.js блокирует Rails UJS 'ajax: успешный обратный вызов - PullRequest
Новая
       31

Vue.js блокирует Rails UJS 'ajax: успешный обратный вызов

0 голосов
/ 19 октября 2018

Я использую UJS и Vue на одной странице и обнаружил конфликт.Пока JSON все еще загружается через AJAX, Vue принимает обратный вызов Rails UJS и предотвращает его запуск.UJS отлично подходит для динамических ссылок на API.Vue также имеет свои очевидные преимущества. 

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ujs/1.2.2/rails.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="main">

  <a class="load-ujs" href="https://jsonplaceholder.typicode.com/todos/1" data-remote="true" data-method="get" data-type="json">Load JSON via UJS link</a>

  <p class="result-ujs"></p>

</div>

$('.load-ujs').on("ajax:success", function(event, data, status, xhr) {
  $('.result-ujs').text(xhr.responseText);
});

// Uncomment the following block and click the link again to demonstrate
// how Vue, once instantiated, conflicts with UJS ajax:success callback

/*
var app = new Vue({
  el: '#main',
  data: {
    number: 1
  }
});
*/

CodePen: https://codepen.io/MSCAU/pen/vVjLjB

Как лучше всего обойти это?

(Если мы можем разобраться, следующийпроблема будет заключаться в том, чтобы заставить UJS обрабатывать директиву href - т.е. v-bind: href = "'https://jsonplaceholder.typicode.com/todos/' + number" - что, я знаю, не может.)

...