Rails + Vue.js - Использование Ajax для обновления компонента Vue

Question

У меня есть приложение Rails 5, использующее веб-упаковщик, который отображает список пользователей.Логика для этого заключается в партиале, содержащем код компонента Vue, например

<profile_modal>

  <template slot="trigger">

    <figure class="profile-card__figure | image -is1x1">
      <img src="<%= person.avatar.url %>" alt="">
    </figure>
...

Все работает хорошо, и .erb меняет это правильно на HTML при обработке страницы.Пока все хорошо.

Теперь я добавил кнопку с надписью «показать больше пользователей», которая выполняет вызов ajax, чтобы привлечь больше пользователей.Я сделал js.erb, в котором есть:

$("#users").html("<%= escape_javascript(render partial: 'layouts/components/profile-card--modal', collection: @users.last(12), as: :person, locals: { content: @users_presenter.profile_modal }) %>"); 

Этот код выполняется, но вместо преобразования "profile_modal" в нужный HTML-код, rails просто вставляет его прямо на страницу,что делает все неправильно.

Есть ли способ, с помощью которого я могу перенести код vue в html, каким он стал бы при обычной обработке, не связанной с ajaxy?

Answer 1

Вы не должны вызывать рендер для всего компонента, вместо этого вы должны создать глобальный компонент, который принимает массив пользователей в виде переменной, что-то в строках:

window.users = [
  { id: 'this-is-an-id', name: 'Evan', age: 34 },
  { id: 'unique-id', name: 'Sarah', age: 98 },
  { id: 'another-unique-id', name: 'James', age: 45 },
];

<ul>
  <li v-for="person in users" :key="person.id">
    {{ person.name }} - {{ person.id }}
  </li>
</ul>

Затем, когда вы изменяетепеременная users, ваш компонент Vue тоже изменится.Поэтому вместо того, чтобы переопределять весь HTML-код для компонента, заставьте вас .js.erb добавить к переменной пользователя:

response_users = <%=j @users.last(12).as_json %>;
Object.assign(users, response_users);