vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

Correct way to do things? #264

Open Mat-Moo opened 9 years ago

Mat-Moo commented 9 years ago

Ok, so I'm toying with an idea, which involves a bunch of widgets that the user can add to a screen reisze and move around and set various properties on/ Each widget will have different properties in a setting panel... pretty standard stuff :) So I've played around and got some basic stuff working in jquery but with all the data vue seems a neater proposition :) I've hacked together a bit of a bodge that allows drag and drop moving/resizing with mouse and keyboard http://asquid.com/vue.php but got a couple of issues. 1) Can't seem to get any resize event to ever trigger? 2) I have an array of widgets, and when I select one I want to update the properties box. So in my example you click on a widget and the input updates... however as soon as I type anything in it goes blank. Pretty sure I've got to force an update on the binding but your docs are the weakest point in this project :( 3) Lets say I have 10 different widgets - how should I be creating them with their templates? Should each one be a component? Can I update dynamically the properties box even when each one is different? 4) Can a component inherit another component? example all the widgets will have a width/height etc. so it's not something I want to repeat? Or should I have a generic component that encapsulates the others?

Sorry for all the questions, just trying to understand all the terminology and the correct way of doing things, I'm a long time programmer maybe a bit too old school, and just trying to update my methodologies (More php than front end so big learning curve for me!)

swift1 commented 9 years ago

Nice page you've made! :smiley:

I haven't looked at the code, but I'll try to answer some of the questions: 1) the resizing works when u drag the mouse from the lower right hand corner of the rectangles 3) it's up to you, but if the components are quite similar, you're probably better off just passing parameters to the components (i.e. <child x=50 y=100> <child x=200 y=300>) 4) yes, you can inherit properties either by passing them in as props, or you can inherit all of the parent's properties by using inherit: true, like this:

Vue.component('child', {
    inherit: true
});