In Laravel we have Accessors that allow us to get manipulated data from a field or fields.
Is there an equivalent in Vuex? Specifically, I am using a component that takes a collection from Vuex and, for each item, displays {{ item.title }}.
However, {{ item.title }} doesn't exist and should be derived, on a collection by collection basis, when I get the data from Vuex. So it could be from {{ item.name }} or {{ item.postcode }} or whatever.
Is there any way I can do this?
Related
From the Bootstrap Vue table documentation it is possible to render data customized.
https://bootstrap-vue.org/docs/components/table#scoped-field-slots
The example shows the following template:
<template v-slot:cell(index)="data">
{{ data.index + 1 }}
</template>
I'm using PUG as a template language and I'm having some trouble with its syntax. I didn't find the correct way to "translate" the above example to PUG syntax.
This doesn't work because of the colon:
template(v-slot:cell(index)="data") {{ data.index + 1 }}
Also this does not seem to be correct:
template(v-slot(cell(index)="data")) {{ data.index + 1 }}
Update #1
This is my field definition:
fields: [
"index",
{
key: "name",
label: this.$t("document.name"),
sortable: true
}
]
And this is the template:
b-table#filesList(
v-if="list.length > 0"
:items="list"
:fields="fields"
stacked="md"
striped
responsive
)
template(v-slot:cell(index)="data") {{ data.index + 1 }}
This only shows an empty "Index" column. If I change the template to the deprected slot and slot-scope synctax it's working:
template(slot="index" slot-scope="data") {{ data.index + 1 }}
Here's the pug "translation" of the code example in the link you provided.
I haven't used pug before, but the code below looks like it's working in this codepen.
Since you need virtual fields, you need to provide a fields array to the fields prop on b-table. That includes all the fields you want to show.
b-table(small, :fields="fields", :items="items", responsive="sm")
template(v-slot:cell(index)="data") {{ data.index + 1 }}
template(v-slot:cell(name)="data")
b.text-info {{ data.value.last.toUpperCase() }},
b {{ data.value.first }}
template(v-slot:cell(nameage)="data") {{ data.item.name.first }} is {{ data.item.age }} years old
template(v-slot:cell()="data")
i {{ data.value }}
Update
The above syntax requires Bootstrap version 2.0.0 and up.
The table slot naming for 2.0.0-rc.28 (and ONLY this version). was [field], HEAD[field] and FOOT[field].
In version 2.0.0-rc.27 and below it's field, HEAD_field, FOOT_field.
If you're using a version below that, i would suggest you update if you can, to get the latest features and fixes. But if you can't, you can instead clone the github repo and generate the documentation for the version you're using. This will allow you to see what is available at the time, and avoid future confusion.
I'm building a nuxt onepager that is feeded with content from the Wordpress Rest Api.
I'm already getting the Wordpress menu structure and every menu item is stored in {{ item.title }}. To scroll later to the requested div with it's id {{ item.title }} i want to complete the {{ item.title }} with a #.
My idea so far is:
<nuxt-link to="'#'{item.title}'" exact class="nav-link">{{ item.title }}</nuxt-link>
You could bind it as follows :
<nuxt-link :to="'#'+item.title" exact class="nav-link">{{ item.title }}</nuxt-link>
I have 3 nested for loops which loop through the array of objects in the objects' property and those array items have their own properties.
props = currentCell.attributes.attrs.properties
I can use materialProp to display the data but to assign I have to do it to currentCell object because if I assign it to materialProp it doesn't save it. (It uses another library for drawing graph and it has to save values to cells.)
Whenever I try to display {{ currentCell.attributes.attrs.properties[key1][index][key] }} or {{ currentCell.attributes.attrs.properties[key1][index] }} it does the job and loops fine but as soon as I invoke function which pushes one more item to the array {{ currentCell.attributes.attrs.properties[key1][index] }} doesnt render aditional elements only those that there before but {{ key1 }} and {{ index }} on their own are rendered fine and are being created in the dom.
<div v-for="(prop, key1) in props" v-if="key1 === 'ingredients' || key1 === 'components'">
<div v-for="(material, index) in prop">
<div v-for="(materialProp, key) in material" class="form-group row">
{{ currentCell.attributes.attrs.properties[key1][index][key] }} // this one is displayed only as many times as there were items in the initial array and doesn't respond to push
{{ key1 }} // this is rendered fine as many times as you push
{{ index }} // this is rendered fine as many times as you push
</div>
</div>
</div>
I have an iterative loop that using v-for on an array of objects that then renders a html li item
<li class="block" v-for="(section, key) in sectionDetails">
Item {{ key }}
</li>
The problem here is that key in the tabindex attribute is not being rendered, what IS being rendered is {{ key }}.
How can I get the value of key to be used for tabindex? I've also tried, :tabindex but that gives me a Javascript error.
Interpolation within attributes is not valid in Vue v2.
You need to bind the tabindex attribute to the key like so:
Item {{ key }}
Here's a working fiddle.
I can't find a way to choose different options for rendering text inside of v-for. Is it possible or do I need to structure the logic differently to do something like the code below?
<template>
<ul v-show="showNotifications">
<li v-for="notification in notifications">
// if notification.type = 'friend request'
New friend request from {{ notification.name }}
// else
New notification from {{ notification.name }}
</li>
</ul>
</template>
Notification is a array of objects with data like name and notification type.
Use another template element like following (not tested)
<template>
<ul v-show="showNotifications">
<li v-for="notification in notifications">
<template v-if="notification.type == 'friend request'">
New friend request from {{ notification.name }}
</template>
<template v-else>
New notification from {{ notification.name }}
</template>
</li>
</ul>
I did what Xymanek said and that isn't work for me completely, I also added a method like this since I realize the component is reactive to the variable in "v-for", in this case "notifications"
forceReload(){
this.files.push(fakeNotification);
this.files.pop();
}
as can see this just force the v-for to "re-render" by pushing a fake object to the array.
you can call this method just after the value of "notification.type" change.