Question

我在同一页面上使用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/'+数字”-我知道不能。）

Vue.js阻止Rails UJS的ajax：成功回调

0 个答案: