Highlight on click in vue, javascript, html and css - javascript

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.

Related

Using Vue 2 ; How to obtain the arrays rowKey obj with a click event

I'm current working on a project that allows the user to upload a file and then download that file clicking on my icon. So the conundrum I'm facing is as a user I would like to click the icon to download that specific file, I'm still a fairly new Jr. Web Dev. I was wondering if someone could give me direction.
I have a .find for my array but for some reason its only displaying the first item within my array. Am I passing something through incorrectly?
My array (this.numberList) contains a rowKey which is the Id of that item eg. "rowkey": "2" and another "label": "filename" which contains the file name
I have my axios calls within a api folder but I believe you guys wont need it but I could be mistaken.
Thank you for reading!
Code
<template>
<div class="app-container">
<el-table
:data="list"
style="width: 100%"
border
stripe
highlight-current-row
tooltip-effect="dark"
>
<el-table-column type="selection" align="center" />
<el-table-column label="Id" width="50px">
<template slot-scope="{ row }">
<span class="link-type">{{ row.rowKey }}</span>
<!--A button that is connectd the the downloadFile function-->
<el-button
type="text"
size="mini"
icon="el-icon-download"
#click="whatFunction"
>
</el-button>
</template> </el-table-column
>>
<el-table-column label="File Name" width="auto">
<template slot-scope="{ row }">
<span class="link-type">{{ row.label }}</span>
</template>
</el-table-column>
<el-table-column label="Tools" width="auto">
<template slot-scope="{ row }">
<el-button type="primary" size="mini">Preview</el-button>
<el-button type="warning" size="mini">Edit</el-button>
<el-button type="danger" size="mini">Delete</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { getMe } from '#/api/remote-search'
export default {
name: 'FileTable',
data() {
return {
list: [],
numberList: [],
}
},
computed: {
downloadList() {
getMe().then((response) => {
this.list = response.data
this.numberList = response.data
})
},
theListOfIdFile() {
return this.numberList.map((x) => x), rowKey
},
},
created() {
this.downloadList
},
methods: {
whatFunction() {
console.log(this.numberList.find((obj) => obj).rowKey)
},
},
}
</script>
Give a try to #click="findRow($event) and in a method findRow(e) { console.log(e) } to find out something that could help you identify the given specific row.
Like an id that you could then find out in your collection (numberList array I guess).

Angular material - mat-grid-list with parent and children components

I want to create grid list using two components. Parent and child. But it doesn't show anything.
parent(app-messages):
<mat-grid-list cols="2">
<app-message-item
*ngFor="let message of messages"
[message]="message"
(deleteMessage)="deleteMessage(message._id)"
(openUpdateDialog)="openUpdateDialog(message._id)"
>
</app-message-item>
</mat-grid-list>
child(app-message-item):
<mat-grid-tile>
<p>
{{ message.created_at | date:'medium' }}
</p>
<div [innerHTML]="message.content"></div>
<img [src]="message.fileImage ? environment+message.path : message.path" height="100">
<button (click)="onDelete(message._id)" class="del">x</button>
<button (click)="onUpdate(message._id)" class="del">Modify</button>
</mat-grid-tile>

Get row index for Antdv table

All I need to do is to get and pass the row index once I click on a button place in a cell of the a-table, I cannot find the solution for it:
<a-table
:columns="columns"
:data-source="getRowsData"
:pagination="false"
row-key="id"
>
<template slot="action" slot-scope="text">
<a-button type="primary" #click="getRowIndex">
{{ text }}
</a-button>
</template>
</a-table>
you can pass the record in the scope, and refer it in click function
<template slot="action" slot-scope="text, record">
<a-button type="primary" #click="() => getRowIndex(record.key)">
{{ text }}
</a-button>
</template>
methods: {
getRowIndex(key) {
//do smthg with the key
},
}

element ui image preview not show in full screen

I'm trying to get my image preview in full screen, it does show image preview but not in full screen.
Code and Demo
var Main = {
data() {
return {
srcList: [
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
],
photos: [
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
],
}
},
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-main>
<!-- gallery -->
<el-col :xs="24" :sm="24" :md="{span: 18, offset: 3}" :lg="{span: 18, offset: 3}" :xl="{span: 18, offset: 3}">
<el-card shadow="always" :body-style="{ padding: '0px' }">
<el-row class="mt-5" :gutter="10">
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" class="text-center mb-3">
<div v-if="photos!=undefined && photos.length > 0">
<el-carousel trigger="click" type="card">
<el-carousel-item v-for="(item, key) in photos" :key="key">
<h3 class="medium">
<el-image
class="image"
:src="item"
style="height:270px;"
:alt="item.caption"
:key="item.id"
:preview-src-list="srcList"></el-image>
</h3>
</el-carousel-item>
</el-carousel>
</div>
</el-col>
</el-row>
</el-card>
</el-col>
</el-main>
</div>
Fiddle Demo
As you see in my demo, When I click to see my images in preview mode they won't show in full screen as in documents , instead they just show on top of my images.
How can i fix it?
Solved
Based on 多一点点爱 idea I've made separate list of my images and integrated previews on that list instead of my carousel items.
Here is my latest code:
<el-carousel trigger="click" type="card" height="270px">
<el-carousel-item v-for="(item, key) in product.photos" :key="key">
<h3 class="medium">
<el-image
class="image"
:src="item.photo"
style="height:270px;"
:alt="item.caption"></el-image>
</h3>
</el-carousel-item>
</el-carousel>
<ul class="list-inline">
<li class="list-inline-item" v-for="(item, key) in product.photos" :key="key">
<el-tooltip class="item" effect="dark" content="Click to see fullscreen" placement="bottom">
<el-image
class="image"
:src="item.photo"
style="width: 30px; height: 30px"
:alt="item.caption"
:key="item.id"
:preview-src-list="srcList"></el-image>
</el-tooltip>
</li>
</ul>
What I did was adding this part below my carousel
<ul class="list-inline">
<li class="list-inline-item" v-for="(item, key) in product.photos" :key="key">
<el-tooltip class="item" effect="dark" content="Click to see fullscreen" placement="bottom">
<el-image
class="image"
:src="item.photo"
style="width: 30px; height: 30px"
:alt="item.caption"
:key="item.id"
:preview-src-list="srcList"></el-image>
</el-tooltip>
</li>
</ul>
And removed :preview-src-list="srcList" from my carousel items.
here is final result screenshot:
Hope it can help others as well.

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

Categories