I want to add an a href link Go Back
I want to bind the value from rows, which is an array:
rows: [["href": "href.com", "id"=>"10"], ["href":"href.com", "id"=>"20"]]
href value its the same on each array, so how can I get href without doing v-for="row in rows"
You currently have an array within an array. I assume your intention was to have an object within an array, like this:
rows: [{"href": "href.com", "id": "10"}, {"href":"href.com", "id": "20"}]
In which case you can do what Psidom suggested and access the object within the rows array with rows[0]['href'] or do a v-for within rows like this:
<template v-for="row in rows" :key="row.id">
<a :href="row.href">Link</a>
</template>
Taking your array as [{"href": "href.com", "id":"10"}, {"href":"href.com", "id":"20"}] and all subarrays have the same href, you can extract the first element in the rows with rows[0] and then access the href key as a normal javascript object. In the template, you can write <a :href="rows[0]['href']">Go Back</a>.
Related
I am trying to get values for the b-form-select from an array inside the array but not able to get it.
I have a code like this:
<span v-for="(user, index) in Users" :key="index">
<span v-for="(userName, index) in user.details" :key="index"> {{userName.name}}</span>
</span>
I am getting the user name here, but I want to display it inside an b-form-select.
I have a code for the b-form-select but it is not helping.
<b-form-select
v-model="user_name"
>
<option
:value="userName.id"
v-for="userName in Users.details"
:key="userName.id"
>{{ userName.name }}
</option
>
</b-form-select>
ANy solution to it?
Your code on top is iterating over user.details from a Users array while the second code block is iterating over Users.details. Do you spot the difference? If you want to iterate over all details you'd need to collect them from Users first. For example,
const details = Users.map(user => user.details)
Or else grab the user you want from Users and iterate over user.details the same way as you do in the spans.
I am working on project with vue.js and element.ui and I am not sure how to handle a problem.
I have an array of objects like this that includes arrays in them, for example:
array:
[
{
"name": string
"array1": array
}
]
I have a table with v-for to display this array of objects like this:
<tr v-for="(man, index) in array" :key="index">
<td>
<el-input v-model="man.name"></el-input>
</td>
<td>
<el-input v-model="man.array1"></el-input>
</td>
</tr>
When I try to edit the main array1 the type is changing to string but I am not sure which way is the best to change it back to array.
How do you recommend to handle this issue ?
el-inputis not made to handle arrays.
an html input deals with text (or numbers) only.
You can't display an array in an input so ... it can't give you back an array.
I don't know what you are trying to achieve so I can't help you more but you can edit your question to give us more informations.
I have a list of products and my product items have some specifications that are different depending on what type of product has been selected. So instead of making 3 different edit forms (1 for each product) I want to iterate over each form field in the list of my specifications.
However I can't use v-model on an iteration so I have to bind it to the :value, however I can't bind these values back dynamically to my form object.
How can I make my form dynamic by iterating over an object and binding it back to my form payload?
v-for
<div v-for="(spec, index) in item.specs" :key="index">
{{spec}}
<v-text-field :name="spec" :label="index" :value="spec"></v-text-field>
</div>
Object
I fill this object from my API return this.specs = response.data.specs
specs:{}
you can use v-model for two-way data bindings. As
<div v-for="(spec, index) in item.specs" :key="index">
{{spec}}
<v-text-field :name="spec" :label="index" :value="spec" v-model='item.specs[index]'></v-text-field>
</div>
I am using a frontend library called Element UI to create some accordions on my website. I got an array of objects that I like to create accordions for. FYI, from the element ui website: the v-model used on the accordion specifies the currently active panel. The name attribute is the unique identification of the panel. That means I can do:
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="Consistency" name="1">
<div>content content content</div>
</el-collapse-item>
<el-collapse-item title="Consistency" name="2">
<div>more content more content more content</div>
</el-collapse-item>
</el-collapse>
One this loads, the first accordion will open since in the data object, activeName is set to 1:
data() {
return {
activeName: '1',
}
}
Now I thought I'd just loop through the array and create accordions for the items in my array, and binding the name attribute to the index + 1, so that the first item will have the name attribute equal to 1, the second to 2 etc. So:
<el-collapse v-model="activeName" accordion>
<el-collapse-item
v-for="(item, index) in experience"
:title="item.company"
:name="index + 1"
:key="index"
>
<div> content content content </div>
</el-collapse-item>
</el-collapse>
But for some reason, when the page loads, the first item in the accordion won't open automatically. They're all closed by default. I created a codesandbox with the problem that you can see for yourself here: codesandbox
The problem is that when you run a for loop and assign name, it's a number and not a string.
:name="index+1" <---- This is a number
But, activeName is a string. So, the values don't match and that's why the accordian does not open on page load.
Here's an updated sandbox: https://codesandbox.io/s/vue-template-ysm79
I changed activeName to a number. The for loop accordian will now open and the normal HTML accordians won't.
In my app I've got some card elements printed dynamically from an array of data. I wanted these cards to open an action sheet on click, that would display an image url from the same array element.
<f7-button class="img-trigger" #click="$refs.actionsOneGroup.open()">
<f7-card v-for="npc in npcs" :key="npc.npcId" class="boss-card-container">
<f7-card-header class="no-border boss-card subheading no-hairline" valign="bottom" :style="'background-image:url(' + npc.npcImg + ');'">
{{ npc.npcName }}
</f7-card-header>
</f7-card>
</f7-button>
<f7-actions class="img-container" ref="actionsOneGroup">
<f7-actions-group v-for="npc in npcs" :key="npc.npcId">
<img :src="npc.npcImg" class="boss-image">
</f7-actions-group>
</f7-actions>
As you can see here, I iterate through the npc array to print the f7-card elements, and on the cards I show a small preview of the npc.npcImg image. What I would like to do is show that same image inside the action sheet. For now I just iterate through the array again separately, which of course results in all the images printing inside the same element, as expected.
I'm not sure how to link the two together and pass the npc.npcImg down to the action sheet component.
Help is much appreciated.
I don't know about the framework7, but in vue.js you have to use this array item as source to display the image. You can pass it as parameter on the refs.actionsOneGroup.open() function and store it in a variable to use it after. In the example I saved the npc in the selectedNpc variable. Your code will looks like it:
<f7-button class="img-trigger">
<f7-card v-for="npc in npcs" :key="npc.npcId" class="boss-card-container" #click="$refs.actionsOneGroup.open(npc)">
<f7-card-header class="no-border boss-card subheading no-hairline" valign="bottom" :style="'background-image:url(' + npc.npcImg + ');'">
{{ npc.npcName }}
</f7-card-header>
</f7-card>
</f7-button>
<f7-actions class="img-container" ref="actionsOneGroup">
<f7-actions-group v-if="selectedNpc">
<img :src="selectedNpc.npcImg" class="boss-image">
</f7-actions-group>
</f7-actions>
I created a codepen to show you how to do it in vue.js