Dynamically associate form elements to models about discussion HOT 9 CLOSED

You don't actually need jQuery. 😁
http://jsbin.com/kabel/1/edit

Oh! and very nice demo, btw. 🍰

from discussion.

@BigBlueHat Hehe I was depending on jQuery because the actual snippet was bigger.

Still using the workaround I mentioned.

from discussion.

Ah. 😃 I was able to use v-model="value" in vue-schema:
https://github.com/BigBlueHat/vue-schema/blob/master/index.html#L13

That seems close to what you want, but I wasn't able to sort out the particular checkbox scenario in the JSBin. Will keep thinking on it though. 😄

from discussion.

@yyx990803 Any idea on how to achieve this? I have the scenario where I have a component that associate an input element to a model (the example I gave above). It was ok when I had 3 of them but now I have 15 and creating them manually is not acceptable.

from discussion.

@yyx990803 I've made another snippet for your better understanding. Check it out.

As you can see I have a few input fields who are tied to specific models. The best case scenario for me is to define the input field as a component and iterate through them dynamically so I don't need to create them manually. Something like:

new Vue({
  // ...
  data: {
    // Defining my fields list
    fields: [
      {id: 'name', title: 'Your name'},
      {id: 'email', title: 'Your email'},
      {id: 'url', title: 'Your URL'}
    ]
  },

  components: {
    // Defining inner app component "user-input" that will make use of the data of the main Vue instance 
    'user-input': {
      template: '<div class="user-input" v-repeat="field: fields"><label for="{{field.id}}">{{field.title}}</label><input type="text" id="{{field.id}}" v-model="{{field.id}}"></div>'
    }
  }
  // ...
});

The whole point is to be able to dynamically create items and set their models.

from discussion.

Pushed yyx990803/vue@8cd19f0 to dev branch which should achieve what you proposed - try it out!

from discussion.

@yyx990803 Great! Thanks Evan! Though it works as I always expected, lazy option seems to be ignored now. Take a look.

from discussion.

@yyx990803 Any idea why lazy is being ignored?

from discussion.

Closing this since the latest release fixes all the issues I've addressed here ✌️

from discussion.