Hi there I'm trying to repeat a div n times,
<div v-for="(item,index) in details" :key="index">
<div class="col-md-8">
<div class="form-group">
<img src='./img' width="250" alt class="imageLOGO"/>
</div>
</div>
<div class=col-md-12>
<div class="form-group" style="display:flex; justify-content:center;">
<div >
<h1>TEST</h1>
<p>TEST</p>
<p>{{this.$t(reports.title)}}</p>
</div>
</div>
</div>
</div>
this is my data
data(){
return{
details: null
}
Details is filled with an array that contains objects,
I want to iterate in this array so I can show n times the component.
And is showing me this error, in others components this error message doesn't show
Cannot read property '$t' of undefined"
Thanks
Related
I created a recipe website, you can find it here https://hungry-vegetarian.com/.
The tab on the index page is a vue instance. I'm trying to create a search bar that is also a vue instance.
The problem occurs when I try to display searched recipes on the index page. It just shows the search result on top of the search bar.
Ideally, only searched recipes should appear on the tab just like they are now but without any indications on top of the tab like Breakfast, Salad, Bakery, etc.
I don't know how to make two objects work together. For now, they work separately without communicating with each other.
SEARCH
<div id="search">
<div class="main-search">
<h1 class="search-question">What are you in the mood for?</h1>
<div class="search-box">
<input type="text" v-model="searchQuery" class="input-search" placeholder="Bread">
<button class="btn-search"><i class="fa fa-search"></i></button>
</div>
</div>
<div class="container">
<div class="recipe" v-for="post in filteredList">
<div v-if="searchQuery">
<a v-bind:href="post.url" class="recipe-card__card-link" target="_blank">
<img v-bind:src="post.image" alt="" class="recipe-card__image"/>
<div class="recipe-card__text-wrapper">
<h2 class="recipe-card__title">{{post.name}}</h2>
<div class="recipe-card__details-wrapper">
<p class="recipe-card__excerpt">{{post.body}}</p>
<a v-bind:href="post.url" class="recipe-card__read-more">Read more <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
tab
<main id="tab">
<header>
<nav>
<ul>
<div id="arrow">
<span></span>
<span></span>
<span></span>
</div>
<li v-for="(tab, tabName) in tabs" :key="tabName">
<button class="tab" #click="setTabActive(tabName)" :class="{'active': tabName === activeTab}">
<span class="tab-copy">{{ tabName }}</span>
<span class="tab-background">
</span>
</button>
</li>
</ul>
</nav>
</header>
<article>
<div class="container">
<transition name="fade" mode="out-in" appear :duration="500">
<tab-content v-for="(tabContent, t) in tabs" :data="tabContent" :key="'content'+t" v-if="t === activeTab" inline-template>
<div class="content-wrapper">
<div class="recipes" v-for="(recipe, i) in data.recipes" :key="i">
<a v-bind:href="recipe.url" class="recipe-card__card-link"></a>
<img :src="recipe.image" alt="" class="recipe-card__image">
<div class="recipe-card__text-wrapper">
<h2 class="recipe-card__title">{{recipe.name}}</h2>
<div class="recipe-card__details-wrapper">
<p class="recipe-card__excerpt">{{recipe.body}}</p>
<a v-bind:href="recipe.url" class="recipe-card__read-more">Read more <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</tab-content>
</transition>
</div>
</article>
</main>
I tried to combine instances search and tab into just one instance tab, but it always gives me a Vue warning:
[Vue warn]: Property or method "searchQuery" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Also, I feel like I can have just the wrong approach to this problem I am trying to solve. Please, any suggestions are welcome. I am stuck.
I am having a hard time understanding why my v-model isn't working correctly
I have an 'service' object which contains a property 'actions' of type IAction[]
I also declared an object actions which is an array of IAction and am currently trying to bind checkBoxes to the actions array, but it is not working.
I feel like i am missing something obvious here but would need a little help understanding what it is.
Here is the relevant code
<script lang="ts">
let actions = [] as IAction[];
</script>
<template>
<div v-for="action in service.Actions" :key="action.Id" class="row">
<div class="col-md-12 d-flex">
<div>
<span class="pe-3">
{{ action.EnumName }}
</span>
<input v-model="actions" :value="action" type="checkbox" />
</div>
</div>
</div>
</template>
I would appreciate any feedback as I am relatively new to VueJs,
Thank you
I think you might not understand what you are doing in code, so I wrote examples.
Bad Code:
<script lang="ts">
let actions = [] as IAction[];
</script>
<template>
// here you iterate thro array and assign to action variable
<div v-for="action in service.Actions" :key="action.Id" class="row">
<div class="col-md-12 d-flex">
<div>
<span class="pe-3">
{{ action.EnumName }}
</span>
// Here you using actions with "s" on end so you using empty array declered in script
<input v-model="actions" :value="action" type="checkbox" />
</div>
</div>
</div>
</template>
If you are getting some data from service.Actions use them! v-model will override those actions if they are ref() or `reactive().
Example:
<script lang="ts">
let actions = [] as IAction[];
</script>
<template>
<div v-for="item in service.Actions" :key="action.Id" class="row">
<div class="col-md-12 d-flex">
<div>
<span class="pe-3">
{{ item.EnumName }}
</span>
<input v-model="item.is" :value="action" type="checkbox" />
</div>
</div>
</div>
</template>
If service.Actions is only array actions you want to add to array in script actions v-model is not a way you do that!
Probably code you need:
<script lang="ts">
const actions = ref([]) // Use refs everywhere !!! A specially in forms.
function deleteItem() {
// ToDo delete item from actions array
}
</script>
<template>
<div v-for="item in service.Actions" :key="item.Id" class="row">
<div class="col-md-12 d-flex">
<div>
<span class="pe-3">
{{ item.EnumName }}
</span>
<button #click="actions = [...actions, item]">ADD</button>
</div>
</div>
</div>
<div>
<div v-for="{ item, index } in actions" :key="item.id">
<span>{{ item.EnumName }}</span><button #click="deleteItem(index)">X</button>
</div>
</div>
</template>
As Mises pointed out, the v-model has to be a part of the same object as the v-for, so i just put my services and the actions array in an object
let foo = { services: serviceStore.services, actions: [] as IAction[] }
I have the following object with a "multimedia" array:
I only need one of the urls, but no idea how ot get it
<div
class="card mb-3"
style="max-width: 540px;"
v-bind:key="news.artices"
v-for="news in newsList" >
<div class="row no-gutters">
<div class="col-md-8">
<div class="card-body">
//this doesn't work
<p v-for="image in news.multimedia" v-bind:key="image">
{{image[0].url}}
</p>
//this works, but shows all
<p v-for="image in news.multimedia" v-bind:key="image">
{{image.url}}
</p>
<h5 class="card-title">{{news.title}}</h5>
</div>
</div>
</div>
</div>
If you want to display only one element of the multimedia array, then you don't need to use v-for unnecessarily. You can simply use:
<p v-bind:key="image" v-if="news.multimedia && news.multimedia.length">
{{ news.multimedia[0].url }}
</p>
Also, you can use v-if to make sure this div is only rendered if news.multimedia has a valid value and it not an empty array.
It looks like multimedia is an array of objects, so you could do: news.multimedia[0].url.
I have the below code to download the elements in ngFor as a PDF . My html is a array list of data information rendered using ngFor . I have a downloadPDF function written which accepts the id as a parameter and loops through the array list and has to save entire loop of array data as PDF when I click on the downloadPDF button. I am not sure why its saving only the first element from the array finalArList . I have attached the JSON response of finalArList and also the pdf file for reference. Any help on this would be really helpful . I am posting this after lot many tries.enter image description here
downloadPDF() {
html2canvas(document.getElementById('testDiv')).then(function(canvas) {
const img = canvas.toDataURL('image/png');
const doc = new jsPDF();
doc.addImage(img, 'JPEG', 5, 5);
doc.save('testCanvas.pdf');
});
}
HTML:
<div id="testDiv" *ngFor="let finalArList of finalArList">
<div>
<h3>
{{finalArList.dischargeDate}} </h3>
<div>
<div>
<div>
<label>Case number:</label>
</div>
<div>
<span>{{finalArList.caseNo}}</span>
</div>
</div>
<div>
<div>
<label>Patient:</label>
</div>
<div>
<span>{{finalArList.patientName}}</span>
</div>
</div>
<div>
<div>
<label>Hospital:</label>
</div>
<div>
<span>{{finalArList.instName}}</span>
</div>
</div>
<div>
<div>
<label>Payee:</label>
</div>
<div>
<span></span>
</div>
</div>
<div>
<div>
<label>Total Doctor Fee:</label>
</div>
<div>
<span>{{finalArList.formattedTotalDrFee}}</span>
</div>
</div>
<div>
<div>
<label>To be Collected:</label>
</div>
<div>
<span>{{finalArList.formattedDrFeeToCollect}}</span>
</div>
</div>
<div>
<div>
<label>Payor:</label>
</div>
<div>
<span>{{finalArList.payor}}</span>
</div>
</div>
<div>
<div>
<label>Remarks:</label>
</div>
<div>
<span>{{finalArList.remark}}</span>
</div>
</div>
<div>
<div>
Paid
<span></span>
</div>
<div>
Unpaid
<span>{{finalArList.formattedUnpaidAmounr}}</span>
</div>
</div>
<div>
<button>View Payment Details</button>
</div>
</div>
</div>
</div>
<button type="button"(click)="downloadPDF()">Download in PDF</button>
When i do like this html2canvas(document.getElementById('myTable')).then(function (canvas) {
console.log('canvas', +canvas);
I am getting NaN.
However, if I hover on top of canvas I get a list of objects attached in screennshot for reference.
I'm loading default listing using vuejs. When I browse page it show me following error
[Vue warn]: Error compiling template:
My html template is as bellow:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img v-bind:src="{{category.URL}}" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
I'm using API to get data. When I inspected API response it's showing me response correctly but vuejs is not showing data in template. My VueJs code is as bellow:
Vue.component('Results',{
template : '#results-template',
props: ['books','genres']
})
and VueJs method is as bellow:
getBooks : function(){
var vm = this;
return $.get('apis.php?gtype=Books')
.done(function(d){
vm.books = JSON.parse(d);
});
}
My created on loading page code is as bellow:
created : function(){
var vm = this;
this.getBooks().done(function(){
........
});
}
Code for data :
data : {
books : []
}
Please help me what's wrong I'm doing?
Your are binding image incorrect way first of all make it correct. Replace your code:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img :src="category.URL" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
with this code:
<template id="results-template">
<div class="results-wrap col-lg-8 col-md-8 ">
<h3>Results:</h3>
<div v-for="category in books" class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0">
<div class="single-vertical-book box">
<div class="book mt-20 text-center">
<img v-bind:src="{{category.URL}}" />
<div class="book-title-latest">
{{category.Title}}
</div>
<div class="book-author-lastest">
<a href="#" v-if="(category.Category == result.id)" v-for="(result,key) in genres" v-bind:key="result.id">
{{result.name}}
</a>
</div>
</div>
</div>
</div>
</div>
</template>
You've to use :src="category.URL" for image src binding not :src="{{category.URL}}"
Secondly in template call you are using "genres" have you initialized genres array or not? this may also cause for error. 1st check both of causes if problem not solved the check further.