Develop Reference

Vue if statement while display data from api

I am getting some data from an Api and I want to check if the vtype is "car". Here is how I loop :
<tr v-for="vehicles_group in vehicles_groups.data" :key="vehicles_group.gid">
<td>
<input type="checkbox">
</td>
<!-- <td>{{ vehicles_groups.gid }} </td> -->
<td>{{ vehicles_group.title }}</td>
<td>{{ vehicles_group.vtype }}</td>
<td>{{ vehicles_group.company }}</td>
<td>{{ vehicles_group.active }}</td>
<td>{{ vehicles_group.priceincludes }}</td>
<td>{{ vehicles_group.categories }}</td>
<td>{{ vehicles_group.earlybook }}</td>
<td>{{ vehicles_group.earlybook }}</td>
</tr>
Is there a way in vue to check if the value of a Api output is car console something?
For example
if {{ vehicles_group.vtype }} == car{
console.log('its a car', vehicles_group.vtype )
}

Sure.
If you want to use v-if in your template:
<td v-if="vehicles_group.vtype == 'car'">
It's a car
</td>
<td v-else>
It's not a car
</td>
If you want to this in your component JavaScript code, you can do it as usual:
if (vehicles_group.vtype == "car") {
console.log('its a car', vehicles_group.vtype )
}

Vuejs appending html after click on element

I have a table that fills with data from json. So how i can append a new after cllicked element ?
<tbody>
<tr v-for="f in firm" class="main" >
<td id="ccc">{{ f.name.toUpperCase() }}</td>
<td>{{ f.open }}</td>
<td>{{ f.max }}</td>
<td>{{ f.min }}</td>
<td>{{ f.close }}</td>
<td>{{ f.change }}</td>
<td>{{ f.trans }}</td>
<td>{{ f.vol }}</td>
</tr>
</tbody>
This code creata for me my table with data And now i want to click one element and after this element append new tr. I try create methods but every my idea wail

If you change the data that your HTML is rendering, the HTML will update automatically. Since the code renders a <tr> for each item in the firm array, add an item to the firm array to make a new <tr>. See the demo below.
new Vue({
el: '#app',
data: {
firm: []
},
methods: {
addRow() {
this.firm.push({
name: 'new row',
open: 'open',
max: 'max',
min: 'min',
close: 'close',
change: 'change',
trans: 'trans',
vol: 'vol',
})
}
}
})
<div id="app">
<button #click="addRow">Add new row</button>
<table>
<tbody>
<tr v-for="f in firm" class="main">
<td id="ccc">{{ f.name.toUpperCase() }}</td>
<td>{{ f.open }}</td>
<td>{{ f.max }}</td>
<td>{{ f.min }}</td>
<td>{{ f.close }}</td>
<td>{{ f.change }}</td>
<td>{{ f.trans }}</td>
<td>{{ f.vol }}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://unpkg.com/vue"></script>

Vue.js - Change the class of a single table row in v-for

I am displaying a table of customers generated dynamically using v-for. Each row has a button that adds the customer ID in an object that will be sent to the API. The thing is, I want to add the Bootstrap .success class to the clicked row, so the user knows that the customer has been selected, but I can only achieve that all the rows in the table get the .success class. Also, I would like that when the user clicks another customer, the selected customer loses the .success class.
Here's my code:
<table class="table table-responsive table-striped table-hover">
<tbody>
<tr v-for="customer in customers">
<td><button class="btn btn-default" v-on:click.prevent="selectCustomer(customer.id)"><i class="glyphicon glyphicon-ok"></i></button></td>
<td>{{ customer.first_name }}</td>
<td>{{ customer.last_name }}</td>
<td>{{ customer.oib }}</td>
<td>{{ customer.phone }}</td>
<td>{{ customer.email }}</td>
<td>{{ customer.street }} {{ customer.city }}, {{ customer.country }}</td>
</tr>
</tbody>
export default {
data(){
return {
customers: [],
selectedCustomer: ''
}
},
methods: {
selectCustomer(id, clicked){
this.selectedCustomer = id;
console.log(this.selectedCustomer);
}
}
Thank you!

Binding success class to the row based on selectedCustomer value should help you achieve what you're looking for. Something like this, untested:
<table class="table table-responsive table-striped table-hover">
<tbody>
<tr v-for="customer in customers" v-bind:class="{'success': (customer.id == selectedCustomer)}">
<td><button class="btn btn-default" v-on:click.prevent="selectCustomer(customer.id)"><i class="glyphicon glyphicon-ok"></i></button></td>
<td>{{ customer.first_name }}</td>
<td>{{ customer.last_name }}</td>
<td>{{ customer.oib }}</td>
<td>{{ customer.phone }}</td>
<td>{{ customer.email }}</td>
<td>{{ customer.street }} {{ customer.city }}, {{ customer.country }}</td>
</tr>
</tbody>

AngularJS repeat filter from input

I have a problem. I have this code but it does not work why? It works in an other project. I have a table and filter it with an input field.
<md-content class="md-padding">
<br>
<md-input-container>
<label>search</label>
<input ng-model="searchCManager" placeholder='lss_user_id'>
</md-input-container>
<table class='table'>
<thead>
<tr class='header'>
<td>user_id</td>
<td>start_number</td>
<td>lss_user_id</td>
<td>agency_number</td>
<td>business_unit_number</td>
<td>office_id</td>
<td>corporate_id</td>
<td>asw_id</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in terminalOverview | filter:searchCManager " ng-class="{'noTerminal': x.terminals.length == '0' || x.terminals.length == 'terminal'}">
<td>{{ x.user_id }}</td>
<td>{{ x.start_number }}</td>
<td>{{ x.lss_user_id }}</td>
<td>{{ x.agency_number }}</td>
<td>{{ x.business_unit_number }}</td>
<td>{{ x.office_id }}</td>
<td>{{ x.corporate_id }}</td>
<td>{{ x.asw_id }}</td>
</tr>
</tbody>
</table>
</md-content>

If you want to filter based on user_id Just try this
<input ng-model="searchCManager.user_id" placeholder='lss_user_id'>

If statement to show success with angular

I'm trying to figure out how to do an if statement so that if the player's batting average is more than .250 it will add a class to the tr of success.
I found the following stack question but I"m not sure which way of utilizing these I could use or should use and how.
http://stackoverflow.com/questions/15810278/if-else-statement-in-angularjs-templates
<tbody>
<tr ng-repeat="player in startingLineupArray track by $index" {{ player.playerBattingAverage > '.250' ? 'class="success"' : ' ' }}>
<td>{{ $index }}</td>
<td>{{ player.playerName }}</td>
<td>{{ player.playerPosition }}</td>
<td>{{ player.playerBattingAverage }}</td>
<td>{{ player.playerBats }}</td>
</tr>
</tbody>

Here is how you can do it...
<tbody>
<tr ng-repeat="player in startingLineupArray track by $index" ng-class="{success: player.playerBattingAverage > .250}">
<td>{{ $index }}</td>
<td>{{ player.playerName }}</td>
<td>{{ player.playerPosition }}</td>
<td>{{ player.playerBattingAverage }}</td>
<td>{{ player.playerBats }}</td>
</tr>
</tbody>

if you want to dynamically add a class, you should use ngClass instead.
AngularJS ngClass conditional