RailsビューからWebpacker内のVueJSコンポーネントにデータを渡す

Question

Rails 5.1の新しいwebpacker gemとVueJSをフィーリングしようとしていますが、VueJSコンポーネントにデータを渡すためのerbビューを取得できません...

のは、私は、ユーザーのショーのビューを持っているとしましょう

# view/users/show.html.erb 
<%= javascript_pack_tag "user-card" %> 
<%= content_tag :div, 
    id: "user-card", 
    data: { 
    username: @user.name 
    } do %> 
<% end %> 

そして、私のjavascript：私は今では、この上でいくつかの時間を費やしてきたが、私の試みのどれも証明なかった

// app/javascript/packs/user-card.js 
require("user-card") 

// app/javascript/user-card/index.js 
import Vue from 'vue/dist/vue.esm' 
import UserCard from './components/UserCard' 

document.addEventListener('DOMContentLoaded',() => { 
    let element = document.getElementById("user-card") 
    let username = element.dataset.username 
    console.log(username); // => "pecpec" 

    const app = new Vue({ 
    el: element, 
    template: '<UserCard/>', 
    components: { UserCard }, 
    data() { 
     return { username } 
    } 
    }) 


// app/javascript/user-card/components/UserCard.vue 
<template> 
    <div> 
    <h3>Hello {{ username }}</h3> 
    </div> 
</template> 

<script> 
export default { 
    props: ['username'], 
    data() { 
    return { 
     username: "" 
    } 
    } 
} 
</script> 

成功した。

Vue.component(UserCard, { 
    props: ['username'] 
    // or 
    data() { 
    return { username: username } 
    } 
}) 

で部品を取り付け、 props: ['username'] ...しかし、それはどちらか

アップデートを動作しませんでした：私は小道具としてコンポーネントにデータを渡して試してみた 私はprops: ['username']がありませんでしたそれに応じて上記のコードを更新しましたが、それは違ったようには見えません。まだ運がない！

Answer 1

作品！ここに私の解決策があります...それを行う標準的な方法であるかどうかは分かりませんが、それにもかかわらず機能します。それは今、とても痛いほど明白に思われる...これは他の人に役立つことを願っています。更新されたコード全体がここにあります：

# view/users/show.html.erb 
<%= javascript_pack_tag "user-card" %> 
<%= content_tag :div, 
    nil, 
    id: "user-card", 
    data: { username: @user.name } 
%>