I am rendering a list and then a sublist within that. I want to have a ref to my inner list which will be named something like list-{id}. However, I am not able to achieve this.
Here is the code snippet:
<ul class="scrollable-list" ref="getScrollableRef(company.id)">
<li v-for="operation in getOperations(company.id)">
{{company.name}}
</li>
</ul>
When I inspect the $refs object:
$vm0.$refs
Object {getScrollableRef(company.id): Array(13)}
I think for some reason the value is not being evaluated. Has anyone faced this?
Edit: I am trying to solve this problem https://github.com/egoist/vue-mugen-scroll/issues/14
In your example, you are specifying that the ref should literally be named "getSchoolableRef(componany.id)". That's why the $refs object contains an getScrollableRef(company.id) property with an array of 13 elements as its value.
If you want to use the result of the getSchoolableRef method as the name of the ref, you can use v-bind or the shorthand colon:
<ul class="scrollable-list" :ref="getScrollableRef(company.id)">
As you mentioned, $refs is not reactive and changing the bound value once the component has initialized will not update the property name in $refs. But, you can dynamically set the name of the ref when the component initializes.
Related
I have array named List and created computed property computedList for him.
When i update value of array it's not showing in html, but in console i see thar array is updated.
`https://jsfiddle.net/apokjqxx/69/`
What is best way to use computed properties for array?
Maybe is exists way to trigger to re-render computed property?
Due to limitations in JavaScript, Vue cannot detect the changes to an array like this: this.list[1] = 'vueman'
You have to use Vue.set or vm.$set as explained here to trigger state updates in the reactivity system, like follwoing:
this.$set(this.list, 1, 'vueman')
see updated fiddler here.
I have an array that I can loop through using ng-for syntax. However, ultimately I want to access just a single element of that array. I cannot figure out how to do that.
In my component script I have
export class TableComponent {
elements: IElement[];
}
In my template, I am able to loop through the elements via
<ul>
<li *ngFor='let element of elements'>{{element.name}}</li>
</ul>
However, trying to access an item in the element array by secifically referencing an item utilizing
x {{elements[0].name}}x
does not seem to work.
The formatting in the template is pretty explicit, so I want to be able to access each element of the array explicitly in the template.
I am not understanding something basic....
2020 Edit :
{{elements?.[0].name}}
is the new way for the null check
Original answer :
{{elements[0].name}}
should just work. If you load elements async (from a server or similar) then Angular fails when it tries to update the binding before the response from the server arrived (which is usually the case). You should get an error message in the browser console though.
Try instead
{{elements && elements[0].name}}
Work around, use ngIf check the length. elements? means if elements is null, don't read the length property.
<div *ngIf="elements?.length">
{{elements[0].name}}
</div>
Let's say I have this code
table(my-attr="value")
...complex component Jade...
and I would like render that my-attr base on property delivered into component. Since v-if works on whole element I cannot do something like
table(my-attr="value", v-if="myProp")
table(v-else)
because I would have to duplicate all the code inside table.
How can I achieve that?
You can use v-bind or interpolate the value directly with {{}}
// (sorry, no jade)
<table v-bind:attribute1="someMethod" attribute2="{{anotherMethod}}">
Now someMethod and anotherMethod should be data, computed properties, or methods of your component, and should return either the attribute's desired value or false. In the latter case, the attribute will not be added to the element at all.
Update: Note that interpolations in attributes have been removed in Vue 2
I have a object $scope.object in parentCtrl, and I have a isolated scope directive. Inside directive, I have a functionality wherein I need to make an API call and fetch one of the property of $scope.object (this property is an array of object) and replace this property in original $scope.object.
I have tried various ways of doing it but somehow I am not exactly getting at it. I have tried updating it using $scope.$parent.object from directive's controller.
After this I tried sending the fetched array in to the parent's controller and replacing it there.
Once the $scope.object gets updated, the directive should run as the directive's template is binded with properties of $scope.object.
The interesting thing is that the view gets updated with new data but the data in original object somehow again becomes null.
I guess, there is some issue with the way my directive is called as the same directive is called nestedly. As shown below:
<li ng-repeat="t in A" ng-if="t.selected">
<div directive> <div>
</li>
where, A is the fetched property and t.selected is true. Now in the fetched data t.selected is true for two elements of array, while the directive is called 4 times, twice for each element. In the first iteration the data remains intact in parent object, while in 2nd iteration, data becomes null
I want to know, how do I update the data of parent object permanently
Directive:
<li ng-repeat="(key, t) in fetch.data>
<div layout="row" layout-wrap directive target="t" ></div>
</li>
and this target is double way binded in directive's scope with parent's scope
The idea is to be able to perform something similar to this:
{{ #each color in colors }}
<li class="{{if car.color==color 'selected' " > </li>
{{/each}}
I am aware of the fact that ember's policy is not to have logic in the templates, still, this (simple) problem is not answered to me, after a day's search.
Build a component, add the logic into a component as a computed property.
A really boring example: http://emberjs.jsbin.com/conijumego/1/edit
You can also use needs and an itemController.
Another boring example: http://emberjs.jsbin.com/taluwuquli/1/edit?html,js,output
Use classNameBindings on an Ember Component:
"If the bound property's value is a string, that value will be added
as a class name without modification"
Ember Component Docs
Working JSBin Demo
In the demo I am defining the value for the class name for the component within the template, but as you can see in the component js, the value could come from anywhere ie., Model data, an array declared in the component etc. No need for an item controller. That approach is being deprecated anyway. We are advised to stay away from controllers in order to have a clear upgrade path to Ember 2.0