We Keep Coding

Is there a way to show a div inside a div that has a false v-if statement

I am using Laravel 6 and Vue.js 2.
I am using a for loop to loop through users and display their info in div's as seen below.
I have the Category names stored in user.pivot.demo2. The users are arranged by category via lodash
_.orderBy(this.category.users, ['pivot.demo2', 'pivot.demo3'])
I need the div with the class of row to only display once for each category. I have the category name set to only display if the category name is the first in the list or does not match the previous name. This separates all the users by category when displaying and puts a the category caption on top of their prospective divs and works just fine. But I need the outer div with a class of row to only be made once per category then filled with the users div that has a class of col-lg-4.
In Laravel's Blade I would just use something like
#if(category != the-same-category)
<div class="row">
#endif
if (category == the-same-category)
<div class="col-lg-4">{{ User.name }} </div>
#endif
#if(category != the-same-category)
</div>
#endif
That would allow for the div with a class of row to only show once per category but the inner divs with the class of col-lg-4 to repeat on every loop. It would also close the div at the end of the condition and each category would have their own divs with the user inside of a single row div. I don't seem to be able to find a Vue.js option that will allow this type of behavior. Can anyone suggest a JavaScript or Vue.js solution?
What I have so far is the code below
<div class="outer-div text-center" v-for="(user, index) in the_category.users" :key="user.id">
<div v-if="index === 0 || user.pivot.demo2 != the_category.users[index -1].pivot.demo2">
<div class="text-center header-one">
<h2>{{ user.pivot.demo2 }}</h2>
</div>
<hr />
</div>
<div class="row d-flex justify-content-center"> // display once per category
<div class="outer-profile-div col-md-4"> // display every loop
<div class="user-name text-center">{{ user.name }}</div>
<div class="user-title text-center">{{ user.title }}</div>
</div>
</div>
My overall goal is to display the (.outer-profile-div)'s next o each other and wrap like typical bootstrap divs inside a .row while maintaining the responsive nature of bootstrap. I don't mind using CSS, JavaScript, Vue.js or whatever will deliver the desired results.

I think you are probably looking for something like this. With this code you can keep a parent element while looping only the childs. It gives you the possibilty to use the conditional directives on the childs due to the template tag had became the parent.
-Example from vue-js docs-
Try it to your problem and tell me if it solves it
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>

Angular 4 - Printing a unique and dynamic value on an HTML with Angular's *ngFor

So i am presented with a task from the client to make a loop of div elements draggable. To make this happened, i have used angular2-draggable to make it possible.
It works on a single div that has not been looped over, as seen below:
<div ngDraggable [handle]="DemoHandle" class="card">
<div #DemoHandle class="card-header">I'm handle. Drag me!</div>
<div class="card-block">You can't drag this block now!</div>
</div>
But the question is, how to i make take this code an place it into an *ngFor loop in Angular (maybe just like the code seen below)?
<div *ngFor="let myValue of myValues" [handle]="{{myValue.id}}">
<div #{{ myValue.id }} >{{ myValue.title }}</div>
</div>
The problem here is that both this [handle]="DemoHandle" and #DemoHandle (Im talking about the DemoHandle value) needs to be unique. But i have no way to print a unique value similar to this code below:
<div *ngFor="let myValue of myValues">
<div [attr.id]="myValue.id" >{{ myValue.title }}</div>
</div>
How do i go about this?

Template reference variables are unique within enclosed view. *ngFor directive create embedded view for each item so that template reference variable is unique there.
So just try the following:
<div ngDraggable *ngFor="let item of [1,2,3]" [handle]="DemoHandle">
<div #DemoHandle class="card-header">I'm handle {{item}}. Drag me!</div>
...
</div>
Ng-run Example

hide div based on textfield input with angularjs

I need to hide a div(class "card") until the user enters text into the textfield.
I'm using angularJS for my app. I guess i have to use ng-showbut how can I get this to work? I appreciate your help.
This is my code:
<input type="text" ng-model="searchBox" class="search1" placeholder="Suchen...">
<div ng-repeat="item in posts | filter:searchBox" class="card">
<h3 class="w">{{item.storeName}}</h3>
[...]

You can simply set ng-show equal to the model value. When it's empty ng-show will evaluate to false and hide the div. When the input has a value ng-show will evaluate to true and show the div.
<div ng-repeat="item in posts | filter:searchBox" class="card" ng-show="searchBox">

add ng-show or ng-if to the element you want to show after value is entered
<div ng-repeat="item in posts | filter:searchBox" class="card" ng-if="searchBox">
or you can wrap this div with another div
<div ng-if="searchBox">
<div ng-repeat="item in posts | filter:searchBox" class="card">
but you do not have to do this... given that the filter will give results only if there is any value matching as per the searchBox, hence if there are not values, ng-repeat will not create any element

ng-repeat on two (or more) rows

My array:
$scope.data = [1,2,3,4,5,6,7,8,9,10];
My HTML:
<div ng-repeat="item in data track by $index">{{item}}</span>
This will output, as expected: 12345678910.
But I want to display the array over two rows, as in the following sample:
12345 // break here
678910
I run some functions on this array, so I don't want to split the array into two smaller ones, cause that would mean I have to run these other functions twice as often. I have looked into the 'start end' part of ngRepeat, but honestly, I don't understand how it works, thoughts?
Note: this is an ionic application, if that matters.
Edit: I can't get the suggested answers to work, I though I could dumb down my code, and make it work, but no. this is my full html ng-repeat code:
<div class="row">
<div class="col" ng-repeat="item in data track by $index">
{{item}}
<br ng-if="$index == 4">
</div>
</div>
This did not work, how come? Anything with row or col?

You could use ng-if to insert a new line when the $index is equal to 4:
<div class="col">
<span ng-repeat="item in data track by $index">
{{item}}
<br ng-if="$index==4">
</span>
</div>
Here, we also move the ng-repeat to a span element inside the div. This solves any potential issues which may arise from the styling applied to the div.

You could also experiment with item.$middle.
item.$middle: true if the repeated element is between the first and last in the iterator
https://docs.angularjs.org/api/ng/directive/ngRepeat
<div ng-repeat="item in data track by $index">
{{item}} <br ng-if="item.$middle" />
</div>
?

Get clicked object value with AngularJS

I'm trying to rewrite a live search feature using AngularJS, but can't find how I can grab the currently clicked item in the list. See below:
<div id="searchResults" ng-show="speaker.list.length > 0">
<ul ng-repeat="person in speaker.list">
<li ng-click="speaker.updateFields()">{{person.name}}</li>
</ul>
</div>
In my speaker.updateFields() method, how do I reference person.name? Is there a different way this should be done?
Thanks.

Pass it in!
<li ng-click="speaker.updateFields(person.name)">{{person.name}}</li>
And the JS
$scope.updateField = function(name) {
//console.log(name)
}

When you use ng-repeat each item is assigned an index value as well.
<div ng-repeat='person in persons'>
{{person.$index}}
</div>