3 ms·
I'm doing my first proper project with VueJS, enhancing a traditional web app with components. I picked Vue because a year ago when I first started experimentin
by pbowyer 8y ago
I'm doing my first proper project with VueJS, enhancing a traditional web app with components. I picked Vue because a year ago when I first started experimenting it seemed much easier than React to enhance parts of existing pages with. That story has changed since, and the React docs are beter about how to use components within pages.
I echo the issues with the attribute syntax. I found marshalling data from the server into components to be painful. I ended up with the following:
<activity-form action="/admin/applications/edit/1001/ajax-activity"
:staff-member="1"
:staff-member-options="[{"value":"1","text":"First Person"},{"value":"2","text":"Second Personki"},{"value":"3","text":"Third Person"}]"
:activity-type-options="[{"value":"note","text":"Note"},{"value":"reminder","text":"Reminder"}]"
:is-super-administrator="true"
@new-activity-log-entry="addActivityLogEntry"
>
</activity-form>
For enhancing existing server-rendered apps, is there a better story for passing data into components?
- kangoo1707 8y agoIf you mix server-side rendered apps with Vue, this is the most common way. Second method is to push the data to a window.__data.staffMemberOptions = "{{ foo }}" and use it in Vue.
- pbowyer 8y agoThanks, good to hear. Elsewhere I've added something similar, and populate the data this way: var vue = new Vue({ el: '#app', created: function () { for (var key in __app.dataForVue) { this[key] = __app.dataForVue[key]; } }, // ... };
- mkopinsky 8y agoOr as another approach: <!-- inventory.html.twig: --> <div id="app" data-inventory="{{ inventory | json_encode }}" > </div> // main.js new Vue({ template: '<App :inventory="inventory"/>', components: {App}, data() { return { inventory: null } }, beforeMount: function () { this.inventory = JSON.parse(this.$el.attributes['data-inventory'].value); } }).$mount('#app');
- lloydatkinson 8y agoI'm sorry but blaming the tools for that HTML encoded mess you've got there is just wrong. Pass the values from the parent component.