<script>
// # is an alias to /src
export default {
name: 'home',
data() {
return {
inc: 0,
inc2: 0,
inc3: 0,
}
},
methods: {
toInc() {
this.inc++
},
toDec() {
this.inc--
},
toInc2() {
this.inc2++
},
toDec2() {
this.inc2--
},
toInc3() {
this.inc3++
},
toDec3() {
this.inc3--
}
}
computed:{ //here i get this error with ";"
total(){
return this.inc+this.inc2+this.inc3;
}
}
}
</script>
<div class="plane">
<div class="columns">
<ul class="price">
<div class="prisinfo">
<p class="item">Ordinarie (<span class="cost">85kr</span>/st)</p> //those prices i need to get when im pressing on +
<div class="priser">
<li class="pris1">-</li>
<p>{{inc}}</p>
<li class="pris1">+</li>
</div>
</div>
<div class="prisinfo">
<p class="item">Barn (<span class="cost">65kr</span>/st)</p> //those prices i need to get when im pressing on +
<div class="priser">
<li class="pris2">-</li>
<p>{{inc2}}</p>
<li class="pris2">+</li>
</div>
</div>
<div class="prisinfo">
<p class="item">Pensionär (<span class="cost">75kr</span>/st) </p> //those prices i need to get when im pressing on +
<div class="priser">
<li class="pris3">-</li>
<p>{{inc3}}</p>
<li class="pris3">+</li>
</div>
</div>
</ul>
</div>
<section id="totalprice">
<p>Pris:<span class="total_price">{{total}}</span></p> // and here my total price after getting all the prices togheter after choosing how many tickets you need.
</section>
I got error in console with "unexpected ;" and my dosnt work anymore after i did those changes. I need also to get the price to add when i press + and substact when i press -, i have the price in html.
You got my coments in the code if you need them.
Im so bad at vue right now, and java is my weak side too.
to show the total price, you may find computed property very useful:
after your data property, add :
computed:{
total(){
return this.inc+this.inc2+this.inc3;
}
},
and you HTML line would be:
<p>Pris:<span class="total_price">{{total}}</span></p>
now, about the + and - buttons:
they look good, i think its just a tiny mistake on the HTML side: you should call the function toInc with ().
like this:
<li class="pris3">+</li>
(#click is like v-on:click https://v2.vuejs.org/v2/guide/syntax.html#v-on-Shorthand)
Related
I'm trying to show the datatime in a v-for, but it just keeps showing the same time over and over.
Is there a way to do this?
v-for -
<div class="location-box-container">
<ul class="location-box-list">
<ol v-for="(location, index) in lineStringData" :key="lineStringData.id">
<p class="locations">{{ location_time }} New Location</p>
</ol>
</ul>
</div>
JS -
data() {
return {
location_time: new Date().toLocaleTimeString(),
}
},
Use a method to lookup time. Not sure where you are storing the time, but you can look up timezone from coords if needed.
<div class="location-box-container">
<ul class="location-box-list">
<ol v-for="(location, index) in lineStringData" :key="lineStringData.id">
<p class="locations">{{ getTime(location) }} New Location</p>
</ol>
</ul>
</div>
methods: {
getTime(location) {
// lookup your timezone, etc here.
return new Date(location.theTime).toLocaleTimeString()
}
}
<div class="col-lg-6">
<a-tabs tabPosition="right">
<a-tab-pane v-for="config in listData" :tab="config.name" :key="config._id">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h4 class="text-black mb-3"><strong>{{ config.name }}</strong></h4>
</div>
</div>
</div>
</div>
</a-tab-pane>
</a-tabs>
</div>
<script>
const listData = [
{
_id: '35324',
name: 'product 1',
},
{
_id: '345434',
name: 'product 2',
},
];
created() {
//I want to get the `config.name` value here every time I click on `tab-pane
}
</script>
I am working on tab-pane in vuejs. I want when I click on tab-pane I get the name of that pane in created. I'm really stuck. Please give me your opinion. Thank you
I'm not sure why you'd like to do that (strange to use that kind of hook this way) but as said before, you may want to use a variable and a click-event function to do that.
In your template :
<a-tab-pane v-for="config in listData" :tab="config.name" :key="config._id" #tabClick="setTabName(config.name)">
...
<h4 class="text-black mb-3"><strong>{{ config.name }}</strong></h4>
...
</a-tab-pane>
in your script :
tabName = '';
setTabName(name) { this.tabName = name; }
I am trying to add a task to a tasklist in Vue based on the input and add task button, but I keep getting the error "taskList is not defined". Does anybody see how to fix this problem? The code is as following:
<template>
<div id="input">
<form>
<input v-model="task.name">
<button v-on:click="addTask" v-bind:value="task.name">+</button>
</form>
<ol>
<div v-for="task in taskList" :key="task.id">
{{ task.name }}
<div v-if="task.completed">
<h2> Done </h2>
</div>
<div v-else>
<h2> Not done</h2>
</div>
</div>
</ol>
</div>
</template>
<script>
export default {
name: 'AddTask',
data: function() {
return {
taskList: [
{
name: 'task', completed: false, id: 3
}
] }
},
methods: {
addTask: function (task) {
taskList.push(task);
alert('test');
}
}
}
</script>
Ps. any other Vue tips are welcome as well.
You need to separate out your taskList and the current task you're adding, decouple it as a new object, then add it to your taskList array.
When referring to items in your data object you need to use the this keyword – e.g this.taskList rather than taskList:
new Vue({
el: "#app",
data: {
id:1,
taskList: [],
currentTask:{
completed:false,
name:'',
id:this.id
}
},
methods: {
addTask: function() {
let newTask = {
completed:this.currentTask.completed,
name:this.currentTask.name,
id:this.currentTask.id
}
this.taskList.push(newTask);
this.id++;
//alert('test');
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="input">
<ol>
<li v-for="task in taskList" :key="task.id">
{{ task.name }}
<input type="checkbox"
:checked="task.completed"
#change="task.completed = !task.completed">
<span v-if="task.completed">
Done
</span>
<span v-else>
Not Done
</span>
</li>
</ol>
<input type="text" v-model="currentTask.name">
<button v-on:click="addTask">+</button>
</div>
</div>
From what I see in your template you use tasklist but you define it as taskList You will want to make sure your names are in the same case. Usually you'll see camelCase in vue, but other popular ones are snake_case and PascalCase
Consider the following code.
<template>
<div class="card-container">
<div class="row">
<div class="col s12">
<a #click="addCard()">Add Card</a>
</div>
</div>
<div class="row">
<div v-for="(card, index) in cards" :key="index">
<div class="card-panel">
<span class="card-title">Card Title</span>
<div class="card-action">
<a #click="deleteCard(index)">Delete</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
cards: []
}
},
methods: {
addCard: function() {
this.cards.push({
description: "",
});
},
deleteCard: function(index) {
this.cards.splice(index,1);
}
},
}
</script>
How to make the cards be grouped so that there are 4 rows and each row contains 4 cards? Upon reaching the fourth row the new cards go to the next page.
I thought I could use something like this codepen.io/parths267/pen/bXbWVv
But I have no idea how to get these cards organized in a pagination system.
The view would look something like this
My solution is calculate all cards of current page ahead.
Uses computed property to calculate the relate values which the pagination needs.
In below simple example (it is only one example, you need to add necessary validations as your actual needs, like boundary conditions) :
pages is the page count
cardsOfCurPage is the cards in current page
Then add one data property=pageIndex save the index of current page.
Anyway, keep data-driven in your mind.
List all arguments your pagination needs,
then declare them in data property or computed property.
execute the necessary calculations in computed property or methods.
PS: I don't know which css framework you uses, so I uses bootstrap instead.
Vue.component('v-cards', {
template: `<div class="card-container">
<div class="row">
<div class="col-12">
<a class="btn btn-danger" #click="addCard()">Add Card</a><span>Total Pages: {{pages}} Total Cards: {{cards.length}} Page Size:<input v-model="pageSize" placeholder="Page Size"></span>
</div>
</div>
<div class="row">
<div v-for="(card, index) in cardsOfCurrPage" :key="index" class="col-3">
<div class="card-panel">
<span class="card-title">Card Title: {{card.description}}</span>
<div class="card-action">
<a #click="deleteCard(index)">Delete</a>
</div>
</div>
</div>
</div>
<p><a class="badge" #click="gotoPrev()">Prev</a>- {{pageIndex + 1}} -<a class="badge" #click="gotoNext()">Next</a></p>
</div>`,
data: function() {
return {
cards: [],
pageSize: 6,
pageIndex: 0
}
},
computed: {
pages: function () {
return Math.floor(this.cards.length / this.pageSize) + 1
},
cardsOfCurrPage: function () {
return this.cards.slice(this.pageSize * this.pageIndex, this.pageSize * (this.pageIndex+1))
}
},
methods: {
addCard: function() {
this.cards.push({
description: this.cards.length,
});
},
deleteCard: function(index) {
this.cards.splice(index,1);
},
gotoPrev: function() {this.pageIndex -=1},
gotoNext: function() {this.pageIndex +=1}
},
})
new Vue({
el: '#app',
data() {
return {
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="app">
<v-cards></v-cards>
</div>
I'm using Vue.js v2 and I've defined a single-file component, RegionFacet.vue. It lists some regions that relate to polygons on a map (click a value, the corresponding polygon appears on the map).
Separately, I have a reset button. When that gets clicked, I call a method in RegionFacet to unselect any checkboxes displayed by RegionFacet. The model does get updated, however, the checkboxes remain checked. What am I missing?
<template>
<div class="facet">
<div class="">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse"v-bind:href="'#facet-' + this.id"><h4 class="panel-title">Regions</h4></a>
</div>
<div v-bind:id="'facet-' + id" class="panel-collapse collapse in">
<ul class="list-group">
<li v-for="feature in content.features" class="list-group-item">
<label>
<input type="checkbox" class="rChecker"
v-on:click="selectRegion"
v-bind:value="feature.properties.name"
v-model="selected"
/>
<span>{{feature.properties.name}}</span>
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['content'],
data: function() {
return {
id: -1,
selected: []
}
},
methods: {
selectRegion: function(event) {
console.log('click: ' + event.target.checked);
if (event.target.checked) {
this.selected.push(event.target.value);
} else {
var index = this.selected.indexOf(event.target.value);
this.selected.splice(index, 1);
}
this.$emit('selection', event.target.value, event.target.checked);
},
reset: function() {
this.selected.length = 0;
}
},
created: function() {
this.id = this._uid
}
}
</script>
<style>
</style>
You are directly setting the array length to be zero, which cannot be detected by Vue, as explained here: https://v2.vuejs.org/v2/guide/list.html#Caveats
Some more info: https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
To overcome this, you may instead set the value of this.selected as follows:
reset: function() {
this.selected = [];
}