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

ng-show not working properly on initial page load

So I was working on a webpage using html, css and Angular.js and I wanted to display the page based on what the user has selected on the dropdown list. The "filter" when the user selects his/her choice works perfectly but initially when the page is loaded I could not get the entire page content to be displayed, instead it displays a blank page.
This is a snippet of my code:
<select ng-model="selectedOption" ng-options="data.id as data.name for data in myData.categories"></select>
<div class="main" >
<ul id="cbp-ntaccordion" class="cbp-ntaccordion" ng-repeat="data in myData.profiles" ng-show="selectedOption == data.category" >
<li class="cbp-ntopen">
<h3 class="cbp-nttrigger">{{data.name}}</h3>
<div class="cbp-ntcontent">
I'm getting an error like:
angular.js:13708Error: [ngRepeat:dupes] errors.angularjs.org/1.5.7/ngRepeat/dupes?

You may use ng-value="defalutvalue" so your code is something like that
<select ng-model="selectedOption" ng-value="defalutvalue" ng-options="data.id as data.name for data in myData.categories"></select>
<div class="main" >
<ul id="cbp-ntaccordion" class="cbp-ntaccordion" ng-repeat="data in myData.profiles" ng-show="selectedOption == data.category" >
<li class="cbp-ntopen">
<h3 class="cbp-nttrigger">{{data.name}}</h3>
<div class="cbp-ntcontent">

From the error that you mentioned, I think you are not giving Angular a way to figure out how to note your object as unique. Use a track by expression in your ng-repeat.
So your ng-repeat would become: ng-repeat="data in myData.profiles track by $index"
See the Tracking and Duplicates section of ngRepeat documentation.
<ul id="cbp-ntaccordion" class="cbp-ntaccordion" ng-repeat="data in myData.profiles track by $index" ng-show="selectedOption == data.category">

AngularJS expression checking child properties in a list

How do I write an angular expression that checks each child item in a list and returns true if any child has a certain property value?
I have a chart legend being generated by an ng-repeat expression. Now I want to show the wrapping element only if any of the child items in the list has the property "datavisible" set to true.
Currently I have a $scope variable "anydatavisible" being set to true if any of the data series is activated so I can use that in an expression.
<div class="chart-legend" ng-show="anydatavisible">
<div ng-repeat="item in model.Accounts track by item.Id" ng-if="item.datavisible">
{{item.Name}}
</div>
</div>
I was wondering I can get the same result by using an expression that checks each child so I don't have the need for the variable "$scope.anydatavisible".
I'm looking for something like this:
<div class="chart-legend" ng-show="any(model.Accounts).datavisible">
<div ng-repeat="item in model.Accounts track by item.Id" ng-if="item.datavisible">
{{item.Name}}
</div>
</div>

Try this:
<div class="chart-legend" ng-show="(model.Accounts | filter:{datavisible:true}).length > 0">

remove element from ngrepeat using filter

How can I mark an element in an array as deleted and hide it by using a filter? I tried this but it doesn't work.
<li ng-repeat="user in preferences.users | filter:user.removed">
<button ng-click="user.removed=1">delete</button>
{{user.id}}
</li>

Don't use user in your filter, and change to bools:
<div ng-repeat="user in users | filter:{removed:false}">
<button ng-click="user.removed=true">remove</button>
</div>
edit: here's a working fiddle.

Try setting user.removed to true instead of 1.