Transmettre les données des vues Rails aux composants VueJS dans webpacker

Question

J'essaie de tripoter la nouvelle gem webpacker de Rails 5.1, avec VueJS, mais je ne peux pas obtenir mes vues erb pour transmettre des données aux composants de VueJS ...

Disons que j'ai une vue show utilisateur

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

Et mon 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> 

J'ai passé quelques heures au cours de cette, maintenant, mais aucune de mes tentatives ont prouvé réussi. J'ai essayé de transmettre les données à la composante comme un accessoire: props: ['username'], le montage du composant avec

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

... mais cela ne fonctionne pas non plus

Mise à jour: je manquais props: ['username'] dans le composant et mis à jour le code ci-dessus en conséquence, bien que cela ne semble pas avoir fait une différence. Toujours pas de chance!

Answer 1

It fonctionne! Voici ma solution ... Je ne sais pas si c'est la façon canonique de le faire, mais ça marche quand même. Cela semble si douloureusement évident maintenant ... J'espère que cela aidera les autres. Voici l'ensemble du code mis à jour:

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

// 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 

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

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

<script> 
export default { 
    props: ['username'] 
} 
</script>