Rails + Vue.js - 使用Ajax更新Vue組件

Question

我有一個使用webpacker的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附加到users變量：

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