Vue list item on click details
I have this Vue app
var app = new Vue({
el: '#main',
delimiters: ['${', '}'],
data () {
posts: [
{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
},
{
id: 2,
title: 'Post title 2',
description: 'Post description 2'
},
{
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}
],
},
methods: {
getPostData: function (event) {
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts"><a @click="getPostData">${ post.title }</a></li>
</ul>
</div>
Here go description from clicked item
I want to click on an item in the list and display description from this item in #item-description div.
How I program this getPostData to grab description from an item on which I click.
Tnx
javascript vue.js vuejs2
edited Nov 21 '18 at 10:43
Yashwardhan Pauranik
2,11011729
asked Nov 21 '18 at 10:11
NikolaNikola
56118
add a comment |
I have this Vue app
var app = new Vue({
el: '#main',
delimiters: ['${', '}'],
data () {
posts: [
{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
},
{
id: 2,
title: 'Post title 2',
description: 'Post description 2'
},
{
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}
],
},
methods: {
getPostData: function (event) {
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts"><a @click="getPostData">${ post.title }</a></li>
</ul>
</div>
Here go description from clicked item
I want to click on an item in the list and display description from this item in #item-description div.
How I program this getPostData to grab description from an item on which I click.
Tnx
javascript vue.js vuejs2
edited Nov 21 '18 at 10:43
Yashwardhan Pauranik
2,11011729
asked Nov 21 '18 at 10:11
NikolaNikola
56118
Would you please describe what exactly is not working as expected?
– kleinfreund
Nov 21 '18 at 10:12
It will be useful to understand what is not working if you add the code you tried so far
– Plastic
Nov 21 '18 at 10:13
For now everything is working. But how i program this getPostData to grab description from item on which I click.
– Nikola
Nov 21 '18 at 10:15
add a comment |
I have this Vue app
var app = new Vue({
el: '#main',
delimiters: ['${', '}'],
data () {
posts: [
{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
},
{
id: 2,
title: 'Post title 2',
description: 'Post description 2'
},
{
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}
],
},
methods: {
getPostData: function (event) {
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts"><a @click="getPostData">${ post.title }</a></li>
</ul>
</div>
Here go description from clicked item
I want to click on an item in the list and display description from this item in #item-description div.
How I program this getPostData to grab description from an item on which I click.
Tnx
javascript vue.js vuejs2
edited Nov 21 '18 at 10:43
Yashwardhan Pauranik
2,11011729
asked Nov 21 '18 at 10:11
NikolaNikola
56118
I have this Vue app
var app = new Vue({
el: '#main',
delimiters: ['${', '}'],
data () {
posts: [
{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
},
{
id: 2,
title: 'Post title 2',
description: 'Post description 2'
},
{
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}
],
},
methods: {
getPostData: function (event) {
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts"><a @click="getPostData">${ post.title }</a></li>
</ul>
</div>
Here go description from clicked item
I want to click on an item in the list and display description from this item in #item-description div.
How I program this getPostData to grab description from an item on which I click.
Tnx
javascript vue.js vuejs2
javascript vue.js vuejs2
edited Nov 21 '18 at 10:43
Yashwardhan Pauranik
2,11011729
asked Nov 21 '18 at 10:11
NikolaNikola
56118
edited Nov 21 '18 at 10:43
Yashwardhan Pauranik
2,11011729
asked Nov 21 '18 at 10:11
NikolaNikola
56118
edited Nov 21 '18 at 10:43
Yashwardhan Pauranik
2,11011729
edited Nov 21 '18 at 10:43
Yashwardhan Pauranik
2,11011729
edited Nov 21 '18 at 10:43
Yashwardhan Pauranik
2,11011729
2,11011729
asked Nov 21 '18 at 10:11
NikolaNikola
56118
asked Nov 21 '18 at 10:11
NikolaNikola
56118
asked Nov 21 '18 at 10:11
NikolaNikola
56118
56118
Would you please describe what exactly is not working as expected?
– kleinfreund
Nov 21 '18 at 10:12
It will be useful to understand what is not working if you add the code you tried so far
– Plastic
Nov 21 '18 at 10:13
For now everything is working. But how i program this getPostData to grab description from item on which I click.
– Nikola
Nov 21 '18 at 10:15
add a comment |
Would you please describe what exactly is not working as expected?
– kleinfreund
Nov 21 '18 at 10:12
It will be useful to understand what is not working if you add the code you tried so far
– Plastic
Nov 21 '18 at 10:13
For now everything is working. But how i program this getPostData to grab description from item on which I click.
– Nikola
Nov 21 '18 at 10:15
Would you please describe what exactly is not working as expected?
– kleinfreund
Nov 21 '18 at 10:12
Would you please describe what exactly is not working as expected?
– kleinfreund
Nov 21 '18 at 10:12
It will be useful to understand what is not working if you add the code you tried so far
– Plastic
Nov 21 '18 at 10:13
It will be useful to understand what is not working if you add the code you tried so far
– Plastic
Nov 21 '18 at 10:13
For now everything is working. But how i program this getPostData to grab description from item on which I click.
– Nikola
Nov 21 '18 at 10:15
For now everything is working. But how i program this getPostData to grab description from item on which I click.
– Nikola
Nov 21 '18 at 10:15
add a comment |
2 Answers
2
active
oldest
votes
You need to somehow store the currently selected item or description. You could do this by calling a method from your template, passing by the item as a parameter. E.g. like this:
var app = new Vue({
el: '#main',
data() {
return {
posts: [{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
}, {
id: 2,
title: 'Post title 2',
description: 'Post description 2'
}, {
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}],
currentDescription: null
};
},
methods: {
setDescription(item) {
this.currentDescription = item.description;
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts">
<a @click="setDescription(post)">${ post.title }</a>
</li>
</ul>
</div>
<div id="item-description">{{ currentDescription }}</div>
If you want to asynchronously fetch new data on a click, you could fetch the data directly in the setDescription method.
EDIT:
It's probably also better to store the ID of the post than the description itself. In this case, you have access to the whole post instead of just the description. You can then also check if the current <li> is active and so on. Here is an example of this. In the example, I've used computed properties, which can then be accessed like regular properties. They are derived from the current state. So, currentPost always gives you the currently selected post if the active ID is set. The currentDescription then reads the description of the currentPost. You can access these properties the same way as regular properties of the state.
var app = new Vue({
el: '#main',
data() {
return {
posts: [{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
}, {
id: 2,
title: 'Post title 2',
description: 'Post description 2'
}, {
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}],
currentId: null
};
},
methods: {
setCurrentId(id) {
this.currentId = id;
}
},
computed: {
currentPost() {
if (this.currentId !== null) {
const currentPostInArray = this.posts.filter(post => {
return post.id === this.currentId;
});
if (currentPostInArray.length === 1) {
return currentPostInArray[0];
}
}
return null;
},
currentDescription() {
if (this.currentPost !== null) {
return this.currentPost.description;
}
return null;
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts" :class="{ active: post.id === currentId }">
<a @click="setCurrentId(post.id)">${ post.title }</a>
</li>
</ul>
</div>
<div id="item-description">{{ currentDescription }}</div>
Just as a side note: Storing the whole post as a copy in the data instead of just the ID is not recommended. By using a computed property, you don't have to worry about this property, it will always be up to date. For instance, if you change the posts array and remove the currently selected post from it, the currentPost will lead to a null value, without updating anything else. Or in the case of changing the description: The computed property always gives you the correct item (with the updated description).
answered Nov 21 '18 at 10:21
ssc-hrep3ssc-hrep3
5,29231656
I have one or question. Hove i added activ class to <li> item. Tnx
– Nikola
Nov 21 '18 at 12:47
I've added a second example which is more proper. I'm storing the current post ID instead of the description. Then, you have always access to the full dynamic post. You can then also check if it's the active<li>. See above.
– ssc-hrep3
Nov 21 '18 at 15:04
Tnx a lot. I'm new in Vue.
– Nikola
Nov 21 '18 at 15:50
add a comment |
<div id="main">
<ul>
<li v-for="(post, index) in posts"><a @click="getPostData(post.description)">${ post.title }</a></li>
</ul>
</div>
methods: {
getPostData: function (postDesc) {
// you got the post Desc
}
}
answered Nov 21 '18 at 10:20
bereket gebredinglebereket gebredingle
1,211819
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53409694%2fvue-list-item-on-click-details%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to somehow store the currently selected item or description. You could do this by calling a method from your template, passing by the item as a parameter. E.g. like this:
var app = new Vue({
el: '#main',
data() {
return {
posts: [{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
}, {
id: 2,
title: 'Post title 2',
description: 'Post description 2'
}, {
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}],
currentDescription: null
};
},
methods: {
setDescription(item) {
this.currentDescription = item.description;
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts">
<a @click="setDescription(post)">${ post.title }</a>
</li>
</ul>
</div>
<div id="item-description">{{ currentDescription }}</div>
If you want to asynchronously fetch new data on a click, you could fetch the data directly in the setDescription method.
EDIT:
It's probably also better to store the ID of the post than the description itself. In this case, you have access to the whole post instead of just the description. You can then also check if the current <li> is active and so on. Here is an example of this. In the example, I've used computed properties, which can then be accessed like regular properties. They are derived from the current state. So, currentPost always gives you the currently selected post if the active ID is set. The currentDescription then reads the description of the currentPost. You can access these properties the same way as regular properties of the state.
var app = new Vue({
el: '#main',
data() {
return {
posts: [{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
}, {
id: 2,
title: 'Post title 2',
description: 'Post description 2'
}, {
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}],
currentId: null
};
},
methods: {
setCurrentId(id) {
this.currentId = id;
}
},
computed: {
currentPost() {
if (this.currentId !== null) {
const currentPostInArray = this.posts.filter(post => {
return post.id === this.currentId;
});
if (currentPostInArray.length === 1) {
return currentPostInArray[0];
}
}
return null;
},
currentDescription() {
if (this.currentPost !== null) {
return this.currentPost.description;
}
return null;
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts" :class="{ active: post.id === currentId }">
<a @click="setCurrentId(post.id)">${ post.title }</a>
</li>
</ul>
</div>
<div id="item-description">{{ currentDescription }}</div>
Just as a side note: Storing the whole post as a copy in the data instead of just the ID is not recommended. By using a computed property, you don't have to worry about this property, it will always be up to date. For instance, if you change the posts array and remove the currently selected post from it, the currentPost will lead to a null value, without updating anything else. Or in the case of changing the description: The computed property always gives you the correct item (with the updated description).
answered Nov 21 '18 at 10:21
ssc-hrep3ssc-hrep3
5,29231656
I have one or question. Hove i added activ class to <li> item. Tnx
– Nikola
Nov 21 '18 at 12:47
I've added a second example which is more proper. I'm storing the current post ID instead of the description. Then, you have always access to the full dynamic post. You can then also check if it's the active<li>. See above.
– ssc-hrep3
Nov 21 '18 at 15:04
Tnx a lot. I'm new in Vue.
– Nikola
Nov 21 '18 at 15:50
add a comment |
You need to somehow store the currently selected item or description. You could do this by calling a method from your template, passing by the item as a parameter. E.g. like this:
var app = new Vue({
el: '#main',
data() {
return {
posts: [{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
}, {
id: 2,
title: 'Post title 2',
description: 'Post description 2'
}, {
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}],
currentDescription: null
};
},
methods: {
setDescription(item) {
this.currentDescription = item.description;
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts">
<a @click="setDescription(post)">${ post.title }</a>
</li>
</ul>
</div>
<div id="item-description">{{ currentDescription }}</div>
If you want to asynchronously fetch new data on a click, you could fetch the data directly in the setDescription method.
EDIT:
It's probably also better to store the ID of the post than the description itself. In this case, you have access to the whole post instead of just the description. You can then also check if the current <li> is active and so on. Here is an example of this. In the example, I've used computed properties, which can then be accessed like regular properties. They are derived from the current state. So, currentPost always gives you the currently selected post if the active ID is set. The currentDescription then reads the description of the currentPost. You can access these properties the same way as regular properties of the state.
var app = new Vue({
el: '#main',
data() {
return {
posts: [{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
}, {
id: 2,
title: 'Post title 2',
description: 'Post description 2'
}, {
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}],
currentId: null
};
},
methods: {
setCurrentId(id) {
this.currentId = id;
}
},
computed: {
currentPost() {
if (this.currentId !== null) {
const currentPostInArray = this.posts.filter(post => {
return post.id === this.currentId;
});
if (currentPostInArray.length === 1) {
return currentPostInArray[0];
}
}
return null;
},
currentDescription() {
if (this.currentPost !== null) {
return this.currentPost.description;
}
return null;
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts" :class="{ active: post.id === currentId }">
<a @click="setCurrentId(post.id)">${ post.title }</a>
</li>
</ul>
</div>
<div id="item-description">{{ currentDescription }}</div>
Just as a side note: Storing the whole post as a copy in the data instead of just the ID is not recommended. By using a computed property, you don't have to worry about this property, it will always be up to date. For instance, if you change the posts array and remove the currently selected post from it, the currentPost will lead to a null value, without updating anything else. Or in the case of changing the description: The computed property always gives you the correct item (with the updated description).
answered Nov 21 '18 at 10:21
ssc-hrep3ssc-hrep3
5,29231656
I have one or question. Hove i added activ class to <li> item. Tnx
– Nikola
Nov 21 '18 at 12:47
I've added a second example which is more proper. I'm storing the current post ID instead of the description. Then, you have always access to the full dynamic post. You can then also check if it's the active<li>. See above.
– ssc-hrep3
Nov 21 '18 at 15:04
Tnx a lot. I'm new in Vue.
– Nikola
Nov 21 '18 at 15:50
add a comment |
You need to somehow store the currently selected item or description. You could do this by calling a method from your template, passing by the item as a parameter. E.g. like this:
var app = new Vue({
el: '#main',
data() {
return {
posts: [{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
}, {
id: 2,
title: 'Post title 2',
description: 'Post description 2'
}, {
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}],
currentDescription: null
};
},
methods: {
setDescription(item) {
this.currentDescription = item.description;
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts">
<a @click="setDescription(post)">${ post.title }</a>
</li>
</ul>
</div>
<div id="item-description">{{ currentDescription }}</div>
If you want to asynchronously fetch new data on a click, you could fetch the data directly in the setDescription method.
EDIT:
It's probably also better to store the ID of the post than the description itself. In this case, you have access to the whole post instead of just the description. You can then also check if the current <li> is active and so on. Here is an example of this. In the example, I've used computed properties, which can then be accessed like regular properties. They are derived from the current state. So, currentPost always gives you the currently selected post if the active ID is set. The currentDescription then reads the description of the currentPost. You can access these properties the same way as regular properties of the state.
var app = new Vue({
el: '#main',
data() {
return {
posts: [{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
}, {
id: 2,
title: 'Post title 2',
description: 'Post description 2'
}, {
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}],
currentId: null
};
},
methods: {
setCurrentId(id) {
this.currentId = id;
}
},
computed: {
currentPost() {
if (this.currentId !== null) {
const currentPostInArray = this.posts.filter(post => {
return post.id === this.currentId;
});
if (currentPostInArray.length === 1) {
return currentPostInArray[0];
}
}
return null;
},
currentDescription() {
if (this.currentPost !== null) {
return this.currentPost.description;
}
return null;
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts" :class="{ active: post.id === currentId }">
<a @click="setCurrentId(post.id)">${ post.title }</a>
</li>
</ul>
</div>
<div id="item-description">{{ currentDescription }}</div>
Just as a side note: Storing the whole post as a copy in the data instead of just the ID is not recommended. By using a computed property, you don't have to worry about this property, it will always be up to date. For instance, if you change the posts array and remove the currently selected post from it, the currentPost will lead to a null value, without updating anything else. Or in the case of changing the description: The computed property always gives you the correct item (with the updated description).
answered Nov 21 '18 at 10:21
ssc-hrep3ssc-hrep3
5,29231656
You need to somehow store the currently selected item or description. You could do this by calling a method from your template, passing by the item as a parameter. E.g. like this:
var app = new Vue({
el: '#main',
data() {
return {
posts: [{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
}, {
id: 2,
title: 'Post title 2',
description: 'Post description 2'
}, {
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}],
currentDescription: null
};
},
methods: {
setDescription(item) {
this.currentDescription = item.description;
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts">
<a @click="setDescription(post)">${ post.title }</a>
</li>
</ul>
</div>
<div id="item-description">{{ currentDescription }}</div>
If you want to asynchronously fetch new data on a click, you could fetch the data directly in the setDescription method.
EDIT:
It's probably also better to store the ID of the post than the description itself. In this case, you have access to the whole post instead of just the description. You can then also check if the current <li> is active and so on. Here is an example of this. In the example, I've used computed properties, which can then be accessed like regular properties. They are derived from the current state. So, currentPost always gives you the currently selected post if the active ID is set. The currentDescription then reads the description of the currentPost. You can access these properties the same way as regular properties of the state.
var app = new Vue({
el: '#main',
data() {
return {
posts: [{
id: 1,
title: 'Post title 1',
description: 'Post description 1'
}, {
id: 2,
title: 'Post title 2',
description: 'Post description 2'
}, {
id: 3,
title: 'Post title 3',
description: 'Post description 3'
}],
currentId: null
};
},
methods: {
setCurrentId(id) {
this.currentId = id;
}
},
computed: {
currentPost() {
if (this.currentId !== null) {
const currentPostInArray = this.posts.filter(post => {
return post.id === this.currentId;
});
if (currentPostInArray.length === 1) {
return currentPostInArray[0];
}
}
return null;
},
currentDescription() {
if (this.currentPost !== null) {
return this.currentPost.description;
}
return null;
}
}
});
<div id="main">
<ul>
<li v-for="(post, index) in posts" :class="{ active: post.id === currentId }">
<a @click="setCurrentId(post.id)">${ post.title }</a>
</li>
</ul>
</div>
<div id="item-description">{{ currentDescription }}</div>
Just as a side note: Storing the whole post as a copy in the data instead of just the ID is not recommended. By using a computed property, you don't have to worry about this property, it will always be up to date. For instance, if you change the posts array and remove the currently selected post from it, the currentPost will lead to a null value, without updating anything else. Or in the case of changing the description: The computed property always gives you the correct item (with the updated description).
answered Nov 21 '18 at 10:21
ssc-hrep3ssc-hrep3
5,29231656
edited Nov 21 '18 at 15:02
answered Nov 21 '18 at 10:21
ssc-hrep3ssc-hrep3
5,29231656
answered Nov 21 '18 at 10:21
ssc-hrep3ssc-hrep3
5,29231656
answered Nov 21 '18 at 10:21
ssc-hrep3ssc-hrep3
5,29231656
5,29231656
I have one or question. Hove i added activ class to <li> item. Tnx
– Nikola
Nov 21 '18 at 12:47
I've added a second example which is more proper. I'm storing the current post ID instead of the description. Then, you have always access to the full dynamic post. You can then also check if it's the active<li>. See above.
– ssc-hrep3
Nov 21 '18 at 15:04
Tnx a lot. I'm new in Vue.
– Nikola
Nov 21 '18 at 15:50
add a comment |
I have one or question. Hove i added activ class to <li> item. Tnx
– Nikola
Nov 21 '18 at 12:47
I've added a second example which is more proper. I'm storing the current post ID instead of the description. Then, you have always access to the full dynamic post. You can then also check if it's the active<li>. See above.
– ssc-hrep3
Nov 21 '18 at 15:04
Tnx a lot. I'm new in Vue.
– Nikola
Nov 21 '18 at 15:50
I have one or question. Hove i added activ class to <li> item. Tnx
– Nikola
Nov 21 '18 at 12:47
I have one or question. Hove i added activ class to <li> item. Tnx
– Nikola
Nov 21 '18 at 12:47
I've added a second example which is more proper. I'm storing the current post ID instead of the description. Then, you have always access to the full dynamic post. You can then also check if it's the active
<li>. See above.– ssc-hrep3
Nov 21 '18 at 15:04
I've added a second example which is more proper. I'm storing the current post ID instead of the description. Then, you have always access to the full dynamic post. You can then also check if it's the active
<li>. See above.– ssc-hrep3
Nov 21 '18 at 15:04
Tnx a lot. I'm new in Vue.
– Nikola
Nov 21 '18 at 15:50
Tnx a lot. I'm new in Vue.
– Nikola
Nov 21 '18 at 15:50
add a comment |
<div id="main">
<ul>
<li v-for="(post, index) in posts"><a @click="getPostData(post.description)">${ post.title }</a></li>
</ul>
</div>
methods: {
getPostData: function (postDesc) {
// you got the post Desc
}
}
answered Nov 21 '18 at 10:20
bereket gebredinglebereket gebredingle
1,211819
add a comment |
<div id="main">
<ul>
<li v-for="(post, index) in posts"><a @click="getPostData(post.description)">${ post.title }</a></li>
</ul>
</div>
methods: {
getPostData: function (postDesc) {
// you got the post Desc
}
}
answered Nov 21 '18 at 10:20
bereket gebredinglebereket gebredingle
1,211819
add a comment |
<div id="main">
<ul>
<li v-for="(post, index) in posts"><a @click="getPostData(post.description)">${ post.title }</a></li>
</ul>
</div>
methods: {
getPostData: function (postDesc) {
// you got the post Desc
}
}
answered Nov 21 '18 at 10:20
bereket gebredinglebereket gebredingle
1,211819
<div id="main">
<ul>
<li v-for="(post, index) in posts"><a @click="getPostData(post.description)">${ post.title }</a></li>
</ul>
</div>
methods: {
getPostData: function (postDesc) {
// you got the post Desc
}
}
answered Nov 21 '18 at 10:20
bereket gebredinglebereket gebredingle
1,211819
answered Nov 21 '18 at 10:20
bereket gebredinglebereket gebredingle
1,211819
answered Nov 21 '18 at 10:20
bereket gebredinglebereket gebredingle
1,211819
answered Nov 21 '18 at 10:20
bereket gebredinglebereket gebredingle
1,211819
1,211819
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53409694%2fvue-list-item-on-click-details%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Would you please describe what exactly is not working as expected?
– kleinfreund
Nov 21 '18 at 10:12
It will be useful to understand what is not working if you add the code you tried so far
– Plastic
Nov 21 '18 at 10:13
For now everything is working. But how i program this getPostData to grab description from item on which I click.
– Nikola
Nov 21 '18 at 10:15