I have this code in a vue3 template:
<a v-if="card.type == 'link'" :href="card.linkData.url">
<img v-if="card.linkData.image" :src="card.linkData.image">
<img v-else :src="card.linkData.favicon">
</a>
The code gets an array of cards for firebase. They might be of type 'image', 'note' or 'link'. By iterating through the array with a v-for, It renders every card with it's info.
If they are of type 'link', they contain an object called linkData.
I want the bit of code shown above to show up only if the card is of type 'link'.
But, I get an error saying that card.linkData is undefined when it's rendering cards of type 'image' or 'note'.
Is that normal? Does it need to read card.linkdata even though it won't render it?
I tried doing this:
<div v-if="card.type == 'link'">
<a :href="card.linkData.url">
<img v-if="card.linkData.image" :src="card.linkData.image">
<img v-else :src="card.linkData.favicon">
</a>
</div>
but the error is still there.
What would be the proper way to do this?
these are examples of card objects obtained fro firebase:
{
id: 1599762353,
imageName: '',
imageUrl: '',
thumbnail: 'link to thumbnail',
title: 'hello',
content: 'a string of text',
createdAt: 'date',
type: 'note'
}
{
id: 1599765625,
imageName: '',
imageUrl: '',
thumbnail: 'link to thumbnail',
title: 'hello',
content: 'a string of text',
createdAt: 'date',
type: 'link',
linkData: {
link: 'https//:www.userlink.com',
image: 'https//:www.linkimage.com',
favicon: ''https//:www.linkicon.com'
}
}
I also tried giving a 'linkData: null' property to cards of type 'image' and 'note' but now the error is card.linkData is null.
Try like following snippet (v-if="card.linkData && card.linkData.link">):
new Vue({
el: '#demo',
data() {
return {
items: [
{id: 1599762353, imageName: '', imageUrl: '', thumbnail: 'link to thumbnail', title: 'hello note', content: 'a string of text', createdAt: 'date', type: 'note'},
{id: 1599765625, imageName: '', imageUrl: '', thumbnail: 'link to thumbnail', title: 'hello', content: 'a string of text', createdAt: 'date', type: 'link', linkData: {link: 'https//:www.userlink.com', image: 'https://picsum.photos/70', favicon: 'https//:www.linkicon.com'}},
{id: 1599765626, imageName: 'https://picsum.photos/50', imageUrl: '', thumbnail: 'link to thumbnail', title: 'hello', content: 'a string of text', createdAt: 'date', type: 'link',}
]
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<li v-for="card in items" :key="card.id">
<div v-if="card.type == 'link'">
<a :href="card.linkData" v-if="card.linkData && card.linkData.link">
<img v-if="card.linkData.image" :src="card.linkData.image">
<img v-else :src="card.linkData.favicon">
</a>
<a :href="card.linkData" v-else>
<img :src="card.imageName">
</a>
</div>
<div v-else>
<p>{{ card.title }}</p>
</div>
</li>
</div>
Related
Is it possible in VueJs to display my blocks sorted by "block.position" value, and update all block position when I click on a "UP" or "DOWN" button?
I want to have my blocks in correct order in my "blocks" array, reflect the index position on the "block.position" value, and display all my blocks in a correct order.
<template>
<div>
<div class="mb-5" v-for="(block, index) in blocks" :key="block.id">
<div class="btn btn-primary" #click="move(index,index-1)" v-if="index">
<span class="fa fa-arrow-up"></span>
</div>
<div class="btn btn-primary"
#click="move(index,index+1)" v-if="index !== (blocks.length - 1)">
<span class="fa fa-arrow-down"></span>
</div>
<h3 class="text-uppercase text-info"><u>{{ block.name }}</u> - {{ block.position }}</h3>
<div v-for="field in block.fields" :key="field.id">
<p>{{ field.name }}</p>
<div class="mb-3">
<div v-if="field.type === 'textarea'">
<textarea
:required="field.required"
:placeholder="field.attr ? field.attr.placeholder : null"
:value="field.data"
/>
</div>
<div v-else>
<input
:type="field.type"
:required="field.required"
:placeholder="field.attr ? field.attr.placeholder : null"
:value="field.data"
/>
</div>
<div class="alert alert-danger" v-for="error in field.errors">
{{ error }}
</div>
</div>
</div>
<hr class="border-light">
</div>
<ul class="list-unstyled d-block">
<li class="d-inline-block">
<button class="btn btn-light" v-on:click="addParagraph">
Add Paragraph
</button>
</li>
<li class="d-inline-block ml-3">
<button class="btn btn-light" v-on:click="addImage">
Add Image
</button>
</li>
</ul>
</div>
</template>
<script>
// Going to use this neat array function
Array.prototype.move = function (from, to) {
this.splice(to, 0, this.splice(from, 1)[0]);
return this;
};
export default {
name: 'BlockForm',
created() {
// Tri dans le tableau les blocks par "block.position".
this.updateBlockPosition();
},
data() {
return {
blocks: [
{
id: 0,
type: 'paragraph',
name: 'Paragraphe',
position: '1',
fields: [
{
id: 0,
type: 'textarea',
name: 'Saisissez votre texte ci-dessous',
required: true,
data: null,
errors: [
'Lorem ipsum sir dolor emet',
],
},
],
},
{
id: 1,
type: 'image',
name: 'Image',
position: '2',
fields: [
{
id: 0,
type: 'file',
name: 'Sélectionner une image',
required: false,
placeholder: null,
data: null,
errors: [],
},
{
id: 1,
type: 'text',
name: 'Description de l\'image',
required: false,
placeholder: null,
data: null,
errors: [],
},
],
},
{
id: 2,
type: 'image',
name: 'Image',
position: '3',
fields: [
{
id: 0,
type: 'file',
name: 'Sélectionner une image',
required: false,
placeholder: null,
data: null,
errors: [],
},
{
id: 1,
type: 'text',
name: 'Description de l\'image',
required: false,
placeholder: null,
data: null,
errors: [],
},
],
},
],
};
},
methods: {
addParagraph() {
this.blocks.push({ ...this.blocks[0] });
this.updateBlockPosition();
},
addImage() {
this.blocks.push(this.blocks[1]);
this.updateBlockPosition();
},
move(from, to) {
this.blocks.move(from, to);
this.updateBlockPosition();
},
updateBlockPosition() {
this.blocks.forEach((block, index) => {
block.id = index + 1;
block.position = index + 1;
});
},
},
};
</script>
I want to create a form dynamically from a json response obtained from backend.
Here is the code:
<template>
<div class="container">
<div v-for="field in form">
<div v-if="field.type === 'text'">
<input type="text" :name="field.name" :placeholder="field.label"/>
</div>
<div v-else-if="field.type === 'radio'">
<div v-for="option in field.options">
<label>
<input type="radio" :name="field.name" :value="option">
<span class="text">{{ option }}</span>
</label>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: [
{
name: 'first_name',
label: 'First Name',
type: 'text',
},
{
name: 'last_name',
label: 'Last Name',
type: 'text',
},
{
name: 'gender',
label: 'Gender',
type: 'radio',
options: ['male','female'],
}
],
response: [], <!--I want to populate this array with form response.-->
}
}
}
</script>
Now, I don't know how many fields to be created and don't know the name. I get a different response from each different request. So I need a way to fill the response[] array with form data. The response[] array may look like this:
response: [
{
name: 'first_name',
value: 'Yeasir',
},
{
name: 'last_name',
value: 'Arafat',
},
{
name: 'gender',
value: 'male',
}
]
How can I achieve the result? It would be a great help.
I have an array of objects coming from a prop. Each object has a title and img key values. I'm using v-for to display the title and how the image from the img value.
<div v-for="item in products" :key="item.id">
<h1>{{item title}}</h1>
<img :src="item.img">
</div>
export default {
name: "home",
props: ["products"]
/*
here is the products
[{id: 1, title: "Moe", img: "../assets/images/stooges/moe.jpg"},
{id: 2, title: "Larry", img: "../assets/images/stooges/larry.jpg"},
{id: 3, title: "Curly", img: "#/assets/images/stooges/curly.jpg"}]
*/
};
On the last element, I'm trying the relative referencing. I've also tried something like this
<img :src="require(item.img)">
At least for the last element, I was hoping to see the image.
<div v-for="item in products" :key="item.id">
<h1>{{ item.title }}</h1>
<img :src="require(`#/assets/images/stooges/${item.img}.jpg`)" />
</div>
export default {
name: "home",
props: ["products"]
data() {
return {
products: [
[{id: 1, title: "Moe", img: "moe"},
{id: 2, title: "Larry", img: "larry"},
{id: 3, title: "Curly", img: "curly"}]
]
};
},
};
I want create a component that it can to scale with a nested object structure using the QExpansionItem from Quasar Framework.
I made a recursive component to try achieve this but doesn't shows like i hope. The items are repeated in a wrong way and I don't know why.
I am using Quasar V1.0.5, the component that i used QexpansionItem
Here the menu object
[
{
name: '1',
icon: 'settings',
permission: 'configuration',
description: '1',
url: '',
children: [
{
name: '1.1',
permission: 'configuration',
url: '/insuranceTypes',
icon: 'add',
description: '1.1'
},
{
name: '1.2',
permission: 'configuration',
url: '/insuranceTypes2',
icon: 'phone',
description: '1.2'
}
]
}, {
name: '2',
icon: 'person',
permission: 'configuration',
url: 'contacts',
description: '2'
}
]
MenuComponent.vue where i call side-tree-menu component
<q-list
bordered
class="rounded-borders q-pt-md"
>
<side-tree-menu :menu="menu"></side-tree-menu>
</q-list>
SideTreeMenuComponent.vue
<template>
<div>
<q-expansion-item
expand-separator
:icon="item.icon"
:label="item.name"
:caption="item.description"
header-class="text-primary"
:key="item.name"
:to="item.url"
v-for="(item) in menu"
>
<template>
<side
v-for="(subitem) in item.children"
:key="subitem.name"
:menu="item.children"
>
</side>
</template>
</q-expansion-item>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'side',
props: ['menu', 'children'],
data () {
return {
isOpen: false,
algo: 0
}
},
mounted () {
console.log('menu', this.menu)
},
computed: {
...mapGetters('generals', ['can'])
}
}
</script>
The elements 1.1 and 1.2 are repeated and I don't know fix it
I got stuck at the same problem and did not find any solution online. I managed to get it working with the below approach. This could be helpful for someone in the future :)
I am adding here the 2 most important code files that will get this working. Rest of my setup is nothing more than what is created by the quasar create [project-name] CLI command.
When you create the project with the above command, you get the MainLayout.vue and EssentialLink.vue file. I have modified those to achieve the required result.
**My MainLayout.vue file - the template **
EssentialLink below is the component that renders the menu recursively using q-expansion-item inside the drawer on the main layout page.
<template>
<q-layout view="hHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<q-btn flat dense round icon="menu" aria-label="Menu"
#click="leftDrawerOpen = !leftDrawerOpen" />
<q-toolbar-title>
{{appTitle}}
</q-toolbar-title>
<div>Release {{ appVersion }}</div>
</q-toolbar>
</q-header>
<q-drawer
v-model="leftDrawerOpen" show-if-above bordered
content-class="bg-grey-1">
<q-list>
<q-item-label
header
class="text-grey-8">
Essential Links
</q-item-label>
<EssentialLink
v-for="link in essentialLinks"
:key="link.title"
v-bind="link">
</EssentialLink>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
script section of MainLayout.vue file. Key properties to note - children and level.
<script>
import EssentialLink from 'components/EssentialLink.vue'
export default {
name: 'MainLayout',
components: {
EssentialLink
},
data () {
return {
appTitle: 'Project Name',appVersion: 'v0.1',leftDrawerOpen: false,
essentialLinks: [
{
title: 'Search', caption: 'quasar.dev', icon: 'school',
link: 'https://quasar.dev',
level: 0,
children: [{
title: 'Documents', caption: 'quasar.dev',icon: 'school',
link: 'https://quasar.dev',
level: 1,
children: [{
title: 'Search (level 3)',
caption: 'quasar.dev',
icon: 'school',
link: 'https://quasar.dev',
level: 2,
children: []
}]
}]
},
{
title: 'Github',caption: 'github.com/quasarframework',
icon: 'code',link: 'https://github.com/quasarframework',
level: 0,
children: [{
title: 'Github Level 2',caption: 'quasar.dev',icon: 'school',
link: 'https://quasar.dev',level: 1,
children: []
}]
},
{
title: 'Forum',caption: 'forum.quasar.dev',
icon: 'record_voice_over',link: 'https://forum.quasar.dev',
level: 0,
children: [{
title: 'Forum Level 2',caption: 'quasar.dev',icon: 'school',
link: 'https://quasar.dev',
level: 1,
children: []
}]
}
]
}
}
}
</script>
Finally the EssentialLink.vue component
The code below recursively calls itself when it encounters more than 1 item in its children property. The level property is used to indent the menus as you drill down.
<template>
<div>
<div v-if="children.length == 0">
<q-item clickable v-ripple :inset-level="level">
<q-item-section>{{title}}</q-item-section>
</q-item>
</div>
<div v-else>
<div v-if="children.length > 0">
<!-- {{children}} -->
<q-expansion-item
expand-separator
icon="mail"
:label="title"
:caption="caption"
:header-inset-level="level"
default-closed>
<EssentialLink
v-for="child in children"
:key="child"
v-bind="child">
</EssentialLink>
</q-expansion-item>
</div>
<div v-else>
<q-item clickable v-ripple :inset-level="level">
<q-item-section>{{title}}</q-item-section>
</q-item>
</div>
</div>
</div>
</template>
*script section of the EssentialLink.vue component
<script>
export default {
name: 'EssentialLink',
props: {
title: {
type: String,
required: true
},
caption: {
type: String,
default: ''
},
link: {
type: String,
default: '#'
},
icon: {
type: String,
default: ''
},
level: {
type: String,
default: ''
},
children: []
}
}
</script>
Final output looks like this (image)
In this example I am allowing the user to create their own typed list of sections. Each type has it's own form fields. The form fields render properly however, if I enter data into one of the fields after I've created two duplicate sections, both inputs are updated with the typed in text. This is not the intended result.
Instead each section should update its form field data content individually and it should reflect back to the value stored within the data.section related to it.
What am I missing?
Laravel View
{{Form::open(['route' => 'api.post.store', 'class' => 'form-horizontal'])}}
<fieldset>
<div id="legend">
<legend class="">Register</legend>
</div>
<div :key="section.id" v-for="(index,section) in sections" class="control-group form-group-lg">
<div class="form-header">
<h3>#{{ section.label }}</h3>
</div>
<pre>#{{ section | json }}</pre>
<div v-for="field in section.fields" :key="field.id">
<div class="text-field" v-show="field.inputType == 'text'">
<label class="control-label" :for="section.name">#{{ field.label }}</label>
<div class="controls">
<input v-model="field.data.content" class="input-xlarge form-control">
<p class="help-block">#{{ field.helpText }}</p>
</div>
</div>
<div class="text-area-field" v-show="field.inputType == 'text-area'">
<label class="control-label" :for="section.name">#{{ field.label }}</label>
<div class="controls">
<textarea :v-bind="field.data.content" class="input xlarge form-control" :placeholder="field.placeholder">
#{{ field.data.content }}
</textarea>
</div>
</div>
<div class="text-area-field" v-show="field.inputType == 'data-map'">
<label class="control-label" :for="section.name">#{{ field.label }}</label>
<div class="controls">
<textarea :v-bind="field.data.content" class="input xlarge form-control" :placeholder="field.placeholder">
#{{ field.data.content }}
</textarea>
</div>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="dropdown">
<a data-target="#" href="page.html" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li v-for="sectionType in sectionTypes">
<a #click="setSectionCreateType(sectionType)" href="#">#{{ sectionType.label }}</a>
</li>
</ul>
</div>
</div>
<div class="controls">
<div #click="addSection()" class="btn bdn-success" class="btn btn-success">Add Section</div>
<div #click="savePost()" class="btn bdn-success" class="btn btn-success">Save</div>
</div>
</div>
</fieldset>
{{Form::close()}}
Vuefile
<script type="text/javascript">
import Vue from 'vue';
import FormField from './create/FormField.vue';
export default {
components: {
FormField,
},
ready: function () {
},
filters: {},
data(){
return {
messages: [],
sections: [],
saveSections: [],
sectionCreateType: false,
sectionTypes: [
{
label: 'Company',
map: 'company',
fields: [
{
label: 'name',
name: 'name',
inputType: 'text',
placeholder: 'Company Name',
data: {
content: '',
},
},
{
label: 'symbol',
name: 'symbol',
inputType: 'text',
placeholder: 'stock symbol',
data: {
content: '',
},
}
]
},
{
label: 'Link',
map: 'link',
inputType: 'text',
data: {},
fields: [
{
label: 'url',
name: 'url',
inputType: 'text',
placeholder: 'Url',
data: {
content: '',
},
},
]
},
{
label: 'Paragraph',
map: 'paragraph',
data: {},
fields: [
{
label: 'content',
name: 'content',
inputType: 'text-area',
placeholder: 'Content',
data: {
content: '',
},
},
]
},
{
label: 'Person',
map: 'person',
data: {},
inputType: 'data-map',
'fields': [
{
label: 'first_name',
name: 'name',
placeholder: 'Person Name',
data: {
content: '',
},
},
{
label: 'last_name',
name: 'name',
placeholder: 'Person Name',
data: {
content: '',
},
}
]
},
],
}
},
directives: {},
events: {},
methods: {
setSectionCreateType(type)
{
console.log('setting sectionCreateType: ' + type.label)
this.sectionCreateType = type;
},
addSection()
{
if (!this.sectionCreateType) {
this.sectionCreateType = this.sectionTypes[0];
}
this.createSection(this.sectionCreateType);
},
createSection(type)
{
this.sections.push(Vue.util.extend({}, type))
},
previewPost(){
},
savePost: function(){
var view = this;
var saveObject = [];
var sectionObject = [];
this.sections.forEach(function (section) {
if(!sectionObject[section.type.map])
{
sectionObject[section.type.map] = [];
}
for (var key in section.type.fields) {
var field = section.type.fields[key];
var saveKey = [];
saveKey[field.name] = field.data.content;
}
sectionObject[section.type.map].push(saveKey);
});
saveObject.push(sectionObject);
console.log(saveObject);
},
}
}
</script>
You are using the same v-model so VueJS does what it should do.
You have to create e.g. list of models and somehow handle index (e.g. take it from v-for for every section/subsection and use v-model='list[index].field