We Keep Coding

How to change only specific nav active background color with condition

i would like to change only 1 specific nav-item to red color if it is selected which means others would be remain blue and only the the specific nav-itm's color would be change if it is selected.
The example condition would be like:
if(this.tabid===3 && active) { background color:red; }
<b-navbar-nav class="mx-auto row nav-slot-custom-bar">
<template v-for="(item, i) in menus">
<b-nav-item
:href="item.href"
class="col"
#click="changeTab(item.tabid)"
:class="{'active': selectNav == item.tabid}"
:key="i">
<b-row class="text-center mb-1 nav-btm-icon" :class="{'active': selectNav == item.tabid}">
<img
:src="item.icon"
aria-hidden="true"
class="mx-auto"
style="width: 31px; height: 31px;"
:class="{ 'active': selectNav == item.tabid }"
/>
</b-row>
</b-nav-item>
</template>
</b-navbar-nav>

You can add conditional classes like so. And then I would just add a class with your desired properties:
:class="[
this.tabid === 3 && active ? 'be_red' : ''
]"
<style>
.be_red {
background-color:red;
}
</style>

Vue 3 dynamic image

I am using a v-for to load data on cards. The image is not showing up and not sure why.
I though :src = "'item.img'" or :src = "{{item.img}}" would work, but neither are working.
Here is my code
<div v-for="(item, index) in basicData" :key="index">
<transition class="slide">
<div v-if="index >= start && index < end" class="card">
<div class="card-body">
<h5 class="card-title">{{item.title}}</h5>
<img
:src="'item.img'"
class="card-img-top"
:alt="'item.img'"
style="margin: 20px 5px"
/>
<p class="card-text">Some quick example text.</p>
</div>
</div>
</transition>
and here is the screen shot
When I hard code src="../assets/featured/pizzaOne.jpeg"
the image appears.

You can create method or computed property:
methods() {
getImage(imagePath) {
return require(imagePath);
}
}
Then in template call that method:
<img
:src="getImage(item.img)"
class="card-img-top"
:alt="item.img"
style="margin: 20px 5px"
/>

Highlight on click in vue, javascript, html and css

I am new with html, javascript and css. I believe that what I'm working with is Vue, which I'm completely new to. I am trying to make my page highlightable when I click on it. Currently, it only highlights when I hover, however I am not able to identify the id for the table from the html portion of the code.
Looked at multiple solutions online, however they all direct towards a premade table, however mine is a table that has multiple pages.
<template>
<div>
<h1>Questions</h1>
<el-row type="flex" justify="end">
<a-button type="primary" #click="createNewQuestion()">New Question</a-button>
<div v-if="this.categoryDetail !== null"> </div>
<a-button-group>
<a-button v-if="this.categoryDetail !== null" type="primary" #click="addQuestion()">Add Question</a-button>
<a-button v-if="this.categoryDetail !== null" :disabled="!hasSelected" type="danger" #click="removeQuestion()">Remove Question</a-button>
</a-button-group>
</el-row>
<hr>
<a-table :dataSource="tdata" :columns="columns"
:customRow="customRow"
#change="onChange" rowKey="id" :loading="loading">
<div
slot="filterDropdown"
slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
class="custom-filter-dropdown"
>
<a-input
v-ant-ref="c => searchInput = c"
:placeholder="`Search ${column.dataIndex}`"
:value="selectedKeys[0]"
#change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
#pressEnter="() => handleSearch(selectedKeys, confirm)"
style="width: 188px; margin-bottom: 8px; display: block;"
/>
<a-button
type="primary"
#click="() => handleSearch(selectedKeys, confirm)"
icon="search"
size="small"
style="width: 90px; margin-right: 8px"
>Search</a-button>
<a-button #click="() => handleReset(clearFilters)" size="small" style="width: 90px">Reset</a-button>
</div>
<a-icon
slot="filterIcon"
slot-scope="filtered"
type="search"
:style="{ color: filtered ? '#108ee9' : undefined }"
/>
<template slot="customRender" slot-scope="text">
<span v-if="searchText">
<template
v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
>
<mark
v-if="fragment.toLowerCase() === searchText.toLowerCase()"
:key="i"
class="highlight"
>{{fragment}}</mark>
<template v-else>{{fragment}}</template>
</template>
</span>
<template v-else>{{text}}</template>
</template>
<template slot="viewButton" slot-scope="text,record">
<a-button type="primary" #click="viewClicked(record)">View</a-button>
</template>
</a-table>
<el-dialog title="Question Details" :visible.sync="dialogDetailVisible" width="50%" :close-on-click-modal="false" append-to-body #close='closeQuestionDetailDialog'>
<QuestionDetail #afterSubmitChanges="afterSubmitDetail" :recordData="record_data" ref="question_detail"></QuestionDetail>
</el-dialog>
<el-dialog top="5vh" title="Select Questions" :visible.sync="dialogSelectVisible" width="50%" :close-on-click-modal="false" append-to-body #close='closeQuestionSelectDialog'>
<SelectQuestion #onCloseDialog="closeSelectDialog" ref="question_select"></SelectQuestion>
</el-dialog>
<el-dialog title="New Question" :visible.sync="dialogNewVisible" width="50%" :close-on-click-modal="false" append-to-body #close='afterCloseNewDialog'>
<NewQuestion #onCloseDialog="closeNewDialog" ref="question_new" :categoryDetail="categoryDetail"></NewQuestion>
</el-dialog>
</div>
</template>
Most of the solutions also use jquery while I'm working with javascript.
Please let me know if more detailed code is required. I'm not sure what to put here.

Add Attribute to an unshift item vuejs

I have two lists , user can drag items from list 1 to list 2 and there is a button with text input so user can add his own input to the list 2 which will be automatically updated in my MYSQL database using axios.
This is AddItem script
addItembh(){
var input = document.getElementById('itemFormbh');
if(input.value !== ''){
// this line makes a new article with input value but no attribute :(
this.tasksNotCompletedNew.unshift({
behv_skilldesc:input.value
});
axios.post('../joborder/addAttrib', {
behv_skilldesc: input.value,
type:'behvnew',
joborder_id: this.joborder_id ,
alljobs_id: this.alljobs_id
}).then((response) => {
console.log(response.data);
}).catch((error) => {
console.log(error);
});
input.value='';
}
},
To be clear on the question : I need to assign an attribute to my new article thats getting created so I can find the text of that attrib later on deleteItem method
UPDATE :
<template>
<div class="row">
<div class="col-md-4 col-md-offset-2">
<section class="list">
<header>Drag or Add Row Here</header>
<draggable class="drag-area" :list="tasksNotCompletedNew" :options="{animation:200, group:'status',handle:'disabled'}" :element="'article'" #add="onAdd($event, false)" #change="update">
<article class="card" v-for="(task, index) in tasksNotCompletedNew" :key="task.prof_id" :data-id="task.prof_id" #change="onChange">
<span >
{{ task.prof_skilldesc }}
</span>
<span v-if="task.prof_skilldesc !== 'Drag Here'">
<button class="pull-left" #click="deleteItem(task.prof_id) + spliceit(index)" ><i class="fa fa-times inline"></i></button>
</span>
</article>
<article class="card" v-if="tasksNotCompletedNew == ''">
<span>
Drag Here
</span>
</article>
</draggable>
<div>
<input id='itemForm' />
<button v-on:click='addItem' class="btn btn-theme btn-success" style='margin-top:5px;' >Add a row </button>
</div>
</section>
</div>
<div class="col-md-4">
<section class="list">
<header>List of Skills ( Hold left click )</header>
<draggable class="drag-area" :list="tasksCompletedNew" :options="{animation:200, group:'status'}" :element="'article'" #add="onAdd($event, true)" #change="update">
<article class="card"
v-for="(task, index) in visibleskills"
:key="task.prof_id" :data-id="task.prof_id"
>
{{ task.prof_skilldesc }}
<div v-if="index == 4" style="display:none" >{{index2 = onChange(index)}}</div>
</article>
<pagination
v-bind:tasksCompletedNew ="tasksCompletedNew"
v-on:page:update ="updatePage"
v-bind:currentPage ="currentPage"
v-bind:pageSize="pageSize">
</pagination>
</draggable>
</section>
</div>
</div>
</template>
So on Add a row our method will be called .
Thanks for any help

Use NG-CLICK to change class on a clicked element

I am creating dynamic tabs using ajax data loaded via the WordPress REST-API. Everything is working, but I need to add a class to the active tab in order to use CSS transforms on it.
I would appreciate any suggestions. I know how to use ng-class when clicking one element affects another, but not when it affects the clicked element. It's also worth noting I am using the 'as' syntax for the ng-controller.
JAVASCRIPT:
var homeApp = angular.module('homeCharacters', ['ngSanitize']);
homeApp.controller('characters', function($scope, $http) {
$scope.myData = {
tab: 0
}; //set default tab
$http.get("http://bigbluecomics.dev/wp-json/posts?type=character").then(function(response) {
$scope.myData.data = response.data;
});
});
homeApp.filter('toTrusted', ['$sce',
function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}
]);
HTML:
<div class="more_comics_mobile">More Comics <img src="./images/white-arrow.png" />
</div>
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
{{ item.content }}
</div>
<div class="char_tabs">
<nav>
<ul ng-init="myData.tab = 0" ng-model='clicked'>
<li class="tab" ng-repeat="item in myData.data">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<h3>{{ item.title }}</h3>
</a>
</li>
</ul>
</nav>
</div>
</section>
I am trying to add the class to the li element. I appreciate any help!

You can use ng-class like
<li class="tab" ng-repeat="item in myData.data" ng-class="{'active' : item.menu_order == myData.tab}"></li>
For more options you can visit
https://docs.angularjs.org/api/ng/directive/ngClass

<div class="more_comics_mobile">More Comics <img src="./images/white-arrow.png" />
</div>
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy" ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
{{ item.content }}
</div>
<div class="char_tabs">
<nav>
<ul ng-init="myData.tab = 0" ng-model='clicked'>
<li class="tab" ng-click="activate($index)" ng-repeat="item in myData.data">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<h3>{{ item.title }}</h3>
</a>
</li>
</ul>
</nav>
</div>
</section>
in your js
$scope.activate = function(index){
document.getElementsByClassName.setAttribute("class","tab");
document.getElementsByClassName[index].setAttribute("class","tab active");
}