Develop Reference

How v-model make a property of object reactive?

Link to my project:
https://codesandbox.io/s/v-model-3j96f
As of my link above, the is a file named HelloWorld.vue inside the "components" folder:
inputvalue.bbbb is a reactive data which is defined in data option, but
It's weird that inputvalue.cccc will become reactive after input with the v-model, but inputvalue.cccc will not reactive with #input.
In this question (Vue.js bind object properties), the first situation should not be possible.

Using v-model will automatically use $set to set the values on nested properties. This ensures this it works with array indices, as well as working for object properties that don't exist, as per your example.
If you're unfamiliar with $set it is documented here:
https://v2.vuejs.org/v2/api/#vm-set
The code for this part of v-model in Vue is here:
https://github.com/vuejs/vue/blob/399b53661b167e678e1c740ce788ff6699096734/src/compiler/directives/model.js#L44
In your example there are two inputs that use cccc. As you noticed, if you edit the input that uses v-model then everything works fine. However, if you use the :value/#input input first then it doesn't work, even if you subsequently use the v-model input. The behaviour is, somewhat oddly, determined by which of those two inputs you edit first.
The reason for that can be seen in the code for $set:
https://github.com/vuejs/vue/blob/399b53661b167e678e1c740ce788ff6699096734/src/core/observer/index.js#L212
The problem is that $set will only add a reactive property if the property doesn't already exist. So if you use the :value/#input input first it will create a non-reactive cccc property and once that is created it can't be made reactive, even if you use $set. It would have to be removed using delete before it could be re-added reactively.

How to create two way binding in angularjs using JSON?

Actually my requirement is want to create form controls like textbox, dropdown, date/time picker etc..
The above controls i want create using JSON , I will have all the Meta Data in the form of JSON.
Using that JSON i can able to create the controls using Angular Directive, Now i want to modify the any of the controls in the VIEW
I need to change the Control as well as the JSON. Here i need to use two way binding.
Please anyone help me to achieve this or Provide any examples likewise.
Thanks in advance.

I'm not sure if I understand the question, but if you're just needing to convert an object literal on your scope to JSON, angular.toJson should fit your needs.
$scope.object = {
foo: 'bar'
}
var result = angular.toJson($scope.object);
Bind $scope.object to your control using ng-model and use angular.toJson in your controller to convert the scope object to JSON to use elsewhere as needed.

How to bind Array from angular $scope to the input

I have an array in $scope, say
$scope.my_array = ["val_1", "val_2", "val_3"]
To bind this array input element, I used ng-model:
<input type="text" ng-model="my_array">
Now I want it to be display the array values as comma separated in input box, but nothing displays. Is this even possible?
In ng-repeat, it is iterating the values, so the array is available to the view.
EDITED: Thanks, the normal way is working for array binding. But in my case I was first using empty array:
$scope.my_array = []
Then, on ng-click function, I am grabbing the data-* attribute from the clicked element and pushing it to the array:
var item = $(".some-class").data("field-type");
$scope.my_array.push(item)
Iterating over this is working fine, but not working while setting to the input.

Look at another topic where two-way filtering is explained in details: How to do two-way filtering in angular.js?
in brief you should use ngModels' $parsers and $formatters collection to be able make .join(", ") before setting to input and to make .split(/, */) before setting value back to the model.

This problem has been solved, I used
$scope.my_array = $scope.my_array.concat(item)
Instead of using .push() method.
I don't know if the push method of the array is a problem, but after concating the value into array, worked for me, now the array values are visible in input field.

How to pass the single parameter to custom attribute directive?

I'm trying to make validation directive for elements generated by ng-repeat (validate common logic). And now my problem is: how to group this elements by this ng-repeat cycle?
I decided to set some unique name on my validation directive to differ elements of different ng-repeats.
So how cat I pass this name?
For example ng-model takes object, and I need just string.

To pass single value in attribute directive (like ng-model="myModel") we can use that fact that directive can read values of any neighbor attribute of the host element INCLUDE IT'S OWN. So if we do something like <div my-directive="someValue">...</div> we can read "someValue" in directive linking function via attributes array. Documentation example.

How to specify a View's data binding context when using multiple view models

Let's assume we have few ViewModels with the same property names like Id, Name, also
we have defined a View template (basically HTML) and want to use/bind a data from both ViewModels.
Question is how to specify a binding data context so it would be a way to indicate from which View Model to use bound properties?

As noted on http://knockoutjs.com/documentation/observables.html, optionally you can pass a second parameter to ko.applyBindings to define which part of the document you want to search for data-bind attributes. For example, ko.applyBindings(myViewModel, document.getElementById('someElementId')). This restricts the activation to the element with ID someElementId and its descendants, which is useful if you want to have multiple view models and associate each with a different region of the page.
Another option would be to use the with: binding introduced on ko 1.3+, which renders the DOM based on a specific viewModel property. This is nice because if the property is null, nothing is rendered at all. Steve shared a live example about this feature on http://jsfiddle.net/StevenSanderson/f5w6u/3/light/