Dynamically associate form elements to models

[rafaelrinaldi]

So, I have a simple list of checkboxes and I want to associate every item to a model but I'm afraid that's not possible. Check it out.
As far as I can see, the only way to do that is to add the models manually but it would be nice if I could do this dynamically. Something like:

<input type="checkbox" name="{{value}}" v-with="serialize" v-model="{{value}}">

The workaround that I'm using today is to iterate through all the checkbox instances on submit and check if they're checked or not... That's not ideal because the data is not persisted anymore.

Any ideas?

[BigBlueHat]

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

Oh! and very nice demo, btw. 🍰

[rafaelrinaldi]

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

Still using the workaround I mentioned.

[BigBlueHat]

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. 😄

[rafaelrinaldi]

@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.

[rafaelrinaldi]

@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.

[yyx990803]

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

[rafaelrinaldi]

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

[rafaelrinaldi]

@yyx990803 Any idea why lazy is being ignored?

[rafaelrinaldi]

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