hello here is my computed method :
computed:
mapState({
aftermovie: (state) => state.festival.aftermovies[id]
}),
id: {
set() { return this.$route.params.id}
},
if i put state.festival.aftermovies [0] it works but if i try to get id in url, id is undefined, can you help me please
I think the issue is you can't access this or other computed property in mapState, try the following:
computed: {
...mapState({
aftermovies: (state) => state.festival.aftermovies
}),
id() {
return this.$route.params.id
},
aftermovie() {
return this.aftermovies[this.id]
}
}
thank you very much yes indeed we can not access this in mapState here is the functional solution:
data() {
return {
// -1 because the aftermovie index is 1 and the index in the array starts at 0
id: this.$route.params.id - 1
}
},
computed:
mapState({
aftermovies: (state) => state.festival.aftermovies
}),
and finally to access the data
<template>
<div>
<div class="container text-center">
<div>
{{ aftermovies[this.id].id }}
{{ aftermovies[this.id].name }}
{{ aftermovies[this.id].video }}
</div>
</div>
</div>
</template>
Related
I have a parent component as a Cart. Here I defined quantity and I want to pass this quantity to the child component's input value which is Counter. So here how I am passing it and here is my parent component, Cart:
<Counter quantity="item.quantity"/>
And here is my child component, Counter:
<template>
<div id="counter">
<button class="minus" #click="countDown"><i :class="quantity == 0 ? 'disabled' : ''" class="fas fa-minus"></i></button>
<div class="count-number"><input class="counter-content" type="number" v-model="quantity"></div>
<button class="plus" #click="countUp"><i class="fas fa-plus"></i></button>
</div>
</template>
<script>
export default {
props: {
quantity: Number
},
methods: {
countUp() {
this.quantity++;
},
countDown() {
if(this.quantity > 0) {
this.quantity--;
}
},
}
}
</script>
I am quite new in Vue, so maybe I am doing something wrong when I pass the props. So could you help me about this?
Try (with the : colon sign)
<Counter :quantity="item.quantity"/>
Before you were just passing the string "item.quanity"
I see you're modifying your prop directly:
countUp() {
this.quantity++;
},
countDown() {
if(this.quantity > 0) {
this.quantity--;
}
},
This is not how you do it in Vue. You need to use two way binding.
countUp() {
this.$emit('input', this.quantity+1)
}
countDown() {
this.$emit('input', this.quantity-1)
}
and in your parent component:
<Counter :quantity="item.quantity" #input="(payload) => {item.quantity = payload}"/>
By the way, the Vue styleguide recommends to use multi-word component names: https://v2.vuejs.org/v2/style-guide/#Multi-word-component-names-essential (Cart = bad, MyCart = good)
We cannot change the value that we get from props, so I created a variable and put props there when mounting
Try it
<Counter :quantity="item.quantity"/>
and
<template>
<div id="counter">
<button class="minus" #click="countDown"><i :class="sum == 0 ? 'disabled' : ''" class="fas fa-minus"></i></button>
<div class="count-number"><input class="counter-content" type="number" v-model="sum"></div>
<button class="plus" #click="countUp"><i class="fas fa-plus"></i></button>
</div>
</template>
<script>
export default {
props: {
quantity: Number
},
data: () => ({
sum: 0
}),
mounted() {
this.sum = this.quantity;
},
methods: {
countUp() {
this.sum++;
},
countDown() {
if(this.sum > 0) {
this.sum--;
}
},
}
}
</script>
In a vue app I get an elementId from the URL to pass in to a vuex getter:
<template>
<p>elementId: {{ elementId }}</p>
<p>loadedElement: {{ loadedElement }}</p>
</template>
<script>
export default {
data() {
return {
elementId: this.$route.params.id,
};
},
computed: {
loadedElement() {
return this.$store.getters.getElementById(this.elementId);
},
},
};
</script>
Getter:
getElementById: (state) => (id) => {
return state.elements.find(ele => ele.id === id)
},
Right now the page gets rendered like this:
However, when hardcode an elementId, it works:
<template>
<p>elementId: {{ elementId }}</p>
<p>loadedElement: {{ loadedElement }}</p>
</template>
<script>
export default {
data() {
return {
elementId: 3,
};
},
computed: {
loadedElement() {
return this.$store.getters.getElementById(this.elementId);
},
},
};
</script>
I don't understand what I'm doing wrong since getting the elementId from the route seems to work, but it is not passed into the getter function.
What am I doing wrong?
Most likely this.$route.params.elementId is a string but your element IDs are numbers. Using === to compare a string and number will not match.
Try using == instead, or converting this.$route.params.elementId to a number:
data() {
return {
elementId: +this.$route.params.id,
};
},
(Of course, maybe you want to do more error checking as part of this.)
parent
export default {
name: "App",
components: {ChildComponent},
data: function() {
return {
itemList: []
};
},
methods: {
fetchData() {
callApi().then(res => { this.itemList= res; })
}
}
};
<template>
<ol>
<template v-for="(item) in itemList">
<li :key="item.id">
<child-component :item="item"></card>
</li>
</template>
</ol>
</template>
child
export default {
name: "ChildComponent",
props: {
item: { type: Object }
},
data: function() {
const {
name,
address,
.......
} = this.item;
return {
name,
address,
......
};
},
};
</script>
child get the item props which is an object.
I'm confused why the itemList point to another array, but the child doesn't update?
is it because key doesnt change? (but other data changed..)
thanks
It is because of this part of your code:
const {
name,
address,
} = this.item;
return {
name,
address,
};
What it does it copies name and address from item and return them.
It happens only once in your code while component is created.
If after that your prop item change, your data doesn't copy it and still returns the first values.
Solution:
If you don't change name or address in a child component, just use a prop
this.item.name in a script or {{ item.name }} in a template
It is already reactive so your component will update when prop changes.
Not sure what you do in your child component but this is enough to do and should react to your parent component changes. Basically the idea is to use the prop. I made some tweaks also.
export default {
name: "App",
components: {ChildComponent},
data: function() {
return {
itemList: []
};
},
methods: {
fetchData() {
callApi().then(res => { this.itemList= res; })
}
}
};
<template>
<ol>
<li v-for="(item) of itemList" :key="item.id">
<card :item="item"></card>
</li>
</ol>
</template>
export default {
name: "ChildComponent",
props: {
item: {
type: Object,
required: true
}
}
};
</script>
<template>
<div>
{{ item.name }} {{ item.address }}
</di>
</template>
It is because the data function is called only once on the creation of the component.
The recommended way to get data that depend on other data is to use computed.
export default {
name: "ChildComponent",
props: {
item: { type: Object }
},
computed: {
name() {
return this.item.name;
},
address() {
return this.item.address;
}
}
};
https://v2.vuejs.org/v2/guide/computed.html#Basic-Example
Here I am trying to implement cloning an element from rankings list and put it in either of the two lists (list1 & list2). Everything seems to be working, I am able to drag and put but it looks like binding does not work as the two lists are not affected, because the watchers do not run when I drag an element to a list. Also, the clone function does not print the message to the console. I was using this example as a reference.
<template>
<div>
<div>
<div>
<draggable
#change="handleChange"
:list="list1"
:group="{ name: 'fighter', pull: false, put: true }"
></draggable>
</div>
<div>
<draggable
#change="handleChange"
:list="list2"
:group="{ name: 'fighter', pull: false, put: true }
></draggable>
</div>
</div>
<div>
<div v-for="wc in rankings" :key="wc.wclass">
<Card>
<draggable :clone="clone"
:group="{ name: 'fighter', pull: 'clone', put: false }"
>
<div class="cell" v-for="(fighter, idx) in wc.fighters" :key="fighter[0]">
<div class="ranking">
{{ idx + 1 }}
</div>
<div class="name">
{{ fighter[0] }}
</div>
</div>
</draggable>
</Card>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import draggable from "vuedraggable";
export default {
components: {
draggable
},
data() {
return {
rankings: [],
list1: [],
list2: []
};
},
methods: {
getRankingLabel(label) {
if (!label || label == "NR") return 0;
if (label.split(" ").indexOf("increased") !== -1) return 1;
if (label.split(" ").indexOf("decreased") !== -1) return -1;
},
clone({ id }) {
console.log("cloning");
return {
id: id + "-clone",
name: id
};
},
handleChange(event) {
console.log(event);
}
},
watch: {
// here I am keeping the length of both lists at 1
list1: function(val) {
console.log(val); // nothing prints, as the watcher does not run
if (val.length > 1) {
this.fighter_one.pop();
}
},
list2: function(val) {
console.log(val); // nothing prints, as the watcher does not run
if (val.length > 1) {
this.fighter_two.pop();
}
}
},
created() {
axios
.get("http://localhost:3000")
.then(res => {
this.rankings = res.data;
})
.catch(err => {
console.log(err);
});
}
};
</script>
<style>
</style>
As others have noted in the comments, your problem is likely related the <draggable> tag not containing either a :list prop or v-model.
With that said, you can limit the size of a list to 1 by calling the splice(1) method on the list in the #change event.
<draggable :list="list1" group="fighter" #change="list1.splice(1)">
{{ list1.length }}
</draggable>
I have the gist of how to do this, but I'm a beginner in vue, and I'm struggling with how to put it together. I need Control.vue to update the index in Exhibitor.vue. I know I'll have an $emit event happening in Control when I click on the button to pass the index data to the parent, and I'd have to use props to pass data from Exhibitor to its children, but how? I can't understand how to pass the index of an array with my code.
Exhibitor.vue
<template>
<div id="exhibitor">
<section class="exhibitor_info">
<h1 class="exhibitor_name">{{ exhibitors[index].firstName }} {{ exhibitors[index].lastName }}</h1>
<h2>Tag Number: {{ exhibitors[index].tagNum }} <em>{{ exhibitors[index].species }}</em></h2>
</section>
<div class="frame"><img :src="getImgUrl(exhibitors[index].picture)" alt="Exhibitor-Picture" class="image"></div>
</div>
</template>
<script>
export default {
name: 'Exhibitor',
data() {
return {
exhibitors: [],
index: 0
}
},
created: function() {
this.fetchExhibitors();
},
methods: {
fetchExhibitors() {
let uri = 'http://localhost:8081/exhibitor'
this.axios.get(uri).then(response => {
this.exhibitors = response.data
})
},
getImgUrl: function(pic) {
return require('../assets/' + pic)
}
}
}
</script>
Display.vue
<template>
<div id="display">
<exhibitor></exhibitor>
<buyer></buyer>
</div>
</template>
<script>
import Exhibitor from './Exhibitor.vue';
import Buyer from './Buyer.vue';
export default {
components: {
'exhibitor': Exhibitor,
'buyer': Buyer
}
}
</script>
Control.vue
<template>
<div id="control">
<display></display>
<button v-on:click="incrementLeft">Left</button>
<button v-on:click="incrementRight">Right</button>
</div>
</template>
<script>
import Exhibitor from './Exhibitor.vue';
import Display from './Display.vue';
export default{
props: ['exhibitors', 'buyers', 'index'],
data() {
return {
index: 0
}
},
methods: {
incrementRight: function() {
// Note that '%' operator in JS is remainder and NOT modulo
this.index = ++this.index % this.exhibitors.length
},
incrementLeft: function() {
// Note that '%' operator in JS is remainder and NOT modulo
if (this.index === 0) {
this.index = this.exhibitors.length - 1
} else {
this.index = --this.index % this.exhibitors.length
}
}
},
components: {
'display': Display
}
}
</script>
So you can get what you want to happen and there are two ways of making it happen that I can think of. First I will just clarify the terms relating to this because you seem to have them the wrong way around. Let's look at you tier structure which is like this:
Control.vue
contains: Display.vue
contains: Exhibitors.vue & Buyers.vue.
Therefore Control.vue is the parent of Display.vue which is the parent of Buyers.vue and Exhibitors.vue.
Anyway, What we need to do is control the array of exhibitors (and I guess buyers but you didn't include them in your code so I'll do likewise) which is in Exhibitors.vue from Control.Vue even though they don't have a direct parent child relationship. What I've done is set a prop that is passed to Display.vue which uses scoped slots to render the exhibitors from Exhibitors.Vue. Because the left and right buttons need to know when to stop going I have emitted the array length from Exhibitors.vue to Display.vue and again to Control.vue. It all works so heres some code.
//Control.vue
<template>
<div class="content">
<display v-on:finalLength="setIndexLimit" :i="index"></display>
<button #click="changeDown">Down</button>
<button #click="changeUp">Up</button>
<p>{{indLimit}}</p>
</div>
</template>
<script>
import Display from '#/components/Display'
export default {
components: {
Display
},
data: () => ({
index: 0,
indLimit: 0
}),
methods: {
changeUp() {
if (this.indLimit === this.index+1) {
this.index=0
}
else {
this.index ++
}
},
changeDown() {
if (this.index === 0) {
this.index = this.indLimit - 1
}
else {
this.index --
}
},
setIndexLimit(e) {
this.indLimit = e
}
}
}
</script>
and
//Display.vue
<template>
<div id="display">
<p>From Display</p>
<exhibitors v-on:ExLength="setLength">
<p>{{i}}</p>
</exhibitors>
<exhibitors>
<p slot-scope="{ exhibitors }">{{exhibitors[i].firstName}}</p>
</exhibitors>
<exhibitors>
<p slot-scope="{ exhibitors }">{{exhibitors[i].lastName}}</p>
</exhibitors>
<exhibitors>
<p slot-scope="{ exhibitors }">{{exhibitors[i].tagNum}}</p>
</exhibitors>
<exhibitors>
<p slot-scope="{ exhibitors }">{{exhibitors[i].species}}</p>
</exhibitors>
</div>
</template>
<script>
import Child from '#/components/admin/Exhibitors'
export default {
components: {
Exhibitors
},
props: [
'i'
],
data: () => ({
exhibitLength: null
}),
methods: {
setLength(e) {
this.exhibitLength = e
this.$emit('finalLength',e)
}
}
}
</script>
And finally:
//Exhibitors.vue
<template>
<div>
<slot :exhibitors="exhibitors"><p>I'm the child component!</p></slot>
</div>
</template>
<script>
export default {
data: () => ({
exhibitors: [
{
firstName: 'Joe',
lastName: 'Burns',
tagNum: 1,
species: 'ant'
},
{
firstName: 'Tom',
lastName: 'Yorke',
tagNum: 2,
species: 'bee'
},
{
firstName: 'Flit',
lastName: 'Argmeno',
tagNum: 3,
species: 'giraffe'
}
],
}),
mounted: function () {
this.$nextTick(function () {
let length = this.exhibitors.length
this.$emit('ExLength', length)
})
}
}
</script>
So as I said all that works, you can click the buttons and it will loop through the array contents. You can style it how you want wherever you like. However, it is a bit messy with props and slots and emits and whatnot just to relay a single index number and it would be far easier in my opinion to have a vuex store where 'index' is stored as a state item and can be used and changed anywhere without all the above carry on.