Develop Reference

How to match array values which is inside v-for loop in Vuejs?

In my code, I have 3 arrays called, boxes, paints, matchingdata. By using those arrays, i want to perfome the functionality.
After the checkbox is clicked, At present i am showing some information related to paints array
So i need to set the condition here like.
if checkox is clicked, i only need to show the paint array two id's called (100, 101)

You must return something from the computed property status

Just remove the template inside script and add it inside the template inside the other template where you have the rest of html code and it should work well.

Global Method to Clone object in vuejs rather then reference it, to avoid code duplication

I am building simple CRUD div list with Vuejs, which allows me to perform all operations on single page as search through results by the means of filter.
The problem I face is that in order to do perform update I have to have two containers for each data object in the loop.
So 1st container acts like view, 2nd has the form with same values as view for editing purposes. I basically toggle them to switch from view to edit mode
It looks something like that:
<input v-model="search">
<items v-for="product in products | filterBy search in searchFields">
<item>
<div v-show="!edit">
Display Data "div"
<div>
<div v-show="edit">
Edit Data "form"
<div>
<item>
</items>
I have a problem with using "filterBy" when looping through items to search through them. Because data in 1st and 2nd container is bound upon editing field in edit mode the element disappears. As filter does not care whether the item is in edit mode or in view mode. It simply filters items, and when the value of item is changed and no longer equal to search value its gone.
I have solved the problem by simply cloning object of view element and passed cloned object to form element instead of referencing it by adding objectClone method on child item. Which sort of fixes my problem as the data in edit mode no longer bound to view mode. But this creates another problem, now I have to copy objectClone method on each new child element of the loop in order for this to work. Is there a way to clone element within vuejs without creating a dedicated method or is it possible to create global method objectClone to use it across all Vue elements?
Additional problem I get with my approach is that element after editing now cloned and I cant remove it from parent data container. As it no longer references the previous element that got cloned.

Retrieving values of dynamically added forms in ExtJS

I am new to ExtJS and working on application where I have a form(lets call it outerForm). I have buttons to add/remove forms dynamically to/from the outerForm.
Now i am using outerForm.getValues() to retrieve all the field values(of all the dynamic forms; lets call these forms innerForm[ ] ).
The problem am facing is : even after removing/destroying the form(say
innerForm[k]), I get its values in the object returned by outerForm.getValues(),although outerForm.items does not have
innerForm[k].
I Know i can loop over outerForm.items for retrieving values rather than using outerForm.getValues(), I just want to know the reason of this inconsistency.

Try below code to remove the element from inner form.
Ext.getCmp('outerFormId').innerItems[olditem.initialConfig.tabIndex].removeAll();
Here i consider outeFormId is a kind of tab panel and it contains different tabs so on tab changes,it removes the current inneritem elements,before moving to new one.

Angular conditionally enabling/disabling HTML selects

Here's an image of what I am trying to do., Plunkr link below.
I have a numeric stepper and rows of select drop-downs. The number of drop-downs are bound (ng-model) to the numeric value of the stepper.
I have two array variables in $scope, that are used for ng-repeat with the individual drop-downs.
How do I writer event listeners such that? If I select a Non NONE value in Driver 1, Channel a1 should be disabled. And Channel a1 needs to be enabled if the Driver 1 is None.
Understand this could be done in jQuery, by writing a change handler and selecting the next sibling and disable it. How do i get the same in Angular ?
fyi. I am using $index variable to create distinct ids for each of the dropdowns
ex: driver_1, channel_1 etc
JSON Dump invokes a helper method in $scope, which prints out the JSON.
The code is on Plunkr. http://plnkr.co/edit/j0ClqQ3P6LZtkgctFrRB
http://plnkr.co/edit/j0ClqQ3P6LZtkgctFrRB

You can use ng-disabled in the channel select:
ng-disabled="value['selectedDriver'] != 'None'"
Here is a demo: http://plnkr.co/UMP6XDe9bQa3y3dFHyE1

How to have a observable collection that can be updated from two sources without causing a loop in knockout.js

I am working with knockout.js. I have a situation where I have a collection of items which each have a observable boolean isleader. Where one of them can be active at a time. If people swap an item in the collection with one from another collection then I check if the old one isleader is true and if so I set it on the new one. This works fine. Now I need to add a second input mechanism which is a dropdown which is bound to the collection to show all the items from the collection. I want the one item in the collection with the isleader set to true to be the selected item and if the selected item is changed I would like the isleader to be updated to reflect this.
How can I do this without creating an infinite loop between the dropdown and the collection constantly updating the selected item.

You can do a peek.
this.selectedItem.peek()
as opposed to
this.selectedItem()
as you are propably doing.
Both will return the fields value, but the first will do it without creating a dependency. In other words, peek will get the value, but it won't subscribe to it.