We Keep Coding

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).

Vue v-select problem with v-slot not showing text

I'm trying to display custom text in v-select options by slots.
Template:
<v-select v-model="dLevelSelected" :items="dLevels" solo>
<template slot="item" slot-scope="data">
<span>{{data.description}}</span>
</template>
</v-select>
Script:
data () {
return {
dLevelSelected: null,
dLevels: [{id:1, value: 1, description: 'Level1'}, {id:2, value: 2, description: 'Level2'}]
}
}
With this, when you open the v-select the two registers of dLevels are appearing as boxes but with any text. It seems like the data.description is being evaluated like data.undefined
Thanks!

slot and slot-scope are deprecated as of Vue 2.6.0.
The new slot syntax combines those two props into v-slot, so the equivalent item slot is:
<template v-slot:item="scope">
<span>{{ scope.item.description }}</span>
</template>
Note the scope contains an item property that can be used to access description. You can use object destructuring to simplify that to:
<template v-slot:item="{ item }">
<span>{{ item.description }}</span>
</template>
Similarly, you'll probably want a custom selection slot that renders the appearance of the selected item:
<template v-slot:selection="{ item }">
<span>{{ item.description }} ({{ item.value }})</span>
</template>
The final template should look similar to this:
<v-select v-model="dLevelSelected" :items="dLevels" solo>
<template v-slot:item="{ item }">
<span>{{ item.description }}</span>
</template>
<template v-slot:selection="{ item }">
<span>{{ item.description }} ({{ item.value }})</span>
</template>
</v-select>
demo

Vue.js - Bootstrap Vue Popover interpreting HTML

I would like a popover to display one or multiple hyperlinks when clicked on. I am able to get other Bootstrap elements to interpret HTML by using the v-html argument although it is not working in this case.
Here's my code:
<template>
<div>
<b-button
:id="popover"
size="sm"
>
Button
</b-button>
<b-popover
:target="popover"
triggers="focus"
v-html="actions"
>
{{ actions }}
</b-popover>
</div>
</template>
<script>
export default {
computed: {
actions() {
return [
`Google<br>`,
`Youtube<br>`
].join('')
}
}
}
</script>

Remove the binding sign : on target and id then change them to popover1 then create a nested div with v-html directive which has as value actions :
<template>
<div>
<b-button
id="popover1"
size="sm"
>
Button
</b-button>
<b-popover
target="popover1"
triggers="focus"
>
<div v-html="actions"></div>
</b-popover>
</div>
</template>
<script>
export default {
computed: {
actions() {
return [
`Google<br>`,
`Youtube<br>`
].join('')
}
}
}
</script>
If the id and target attributes are bound to a property you should keep the binding sign.

v-for and state management issue

I have a list of items rendered with v-for. I want each item to have a "?" that is clickable to show a modal containing a description for that specific item. My issue right now is that when the "?" is clicked, it shows the modal for every item in the v-for. How do i solve this?
<div
v-for="(item, index) in items"
:key="index"
>
<div>
{{ item.name }}
<div>
<span #click="itemModal = true">
?
</span>
<div v-show="itemModal">
{{ item.description }}
<button #click="itemModal = false">
Close modal
</button>
</div>
</div>
</div>
</div>
export default {
data() {
return {
itemModal: false
}
}
}

Your itemModal property is share with all items currently, so you need one modal status for each item.
eg. you can create a toggle method to update an array of modal status:
<div
v-for="(item, index) in items"
:key="index"
>
<div>
{{ item.name }}
<div>
<span #click="toggle(index)">
?
</span>
<div v-show="itemModal[index]">
{{ item.description }}
<button #click="toggle(index)">
Close modal
</button>
</div>
</div>
</div>
</div>
export default {
data() {
return {
itemModal: []
}
},
methods: {
toggle(index) {
this.$set(this.itemModal, index, !this.itemModal[index])
}
}
}
nb: an array (or an object) is not reactive in depth, so we have to use Vue.$set (cf. docs)

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.