Vue list item on click details












1















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










share|improve this question

























  • 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


















1















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










share|improve this question

























  • 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
















1












1








1








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










share|improve this question
















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 21 '18 at 10:43









Yashwardhan Pauranik

2,11011729




2,11011729










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





















  • 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














2 Answers
2






active

oldest

votes


















1














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).






share|improve this answer


























  • 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



















1














<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
}
}





share|improve this answer























    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
    });


    }
    });














    draft saved

    draft discarded


















    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









    1














    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).






    share|improve this answer


























    • 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
















    1














    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).






    share|improve this answer


























    • 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














    1












    1








    1







    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).






    share|improve this answer















    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).







    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Nov 21 '18 at 15:02

























    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



















    • 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













    1














    <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
    }
    }





    share|improve this answer




























      1














      <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
      }
      }





      share|improve this answer


























        1












        1








        1







        <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
        }
        }





        share|improve this answer













        <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
        }
        }






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 21 '18 at 10:20









        bereket gebredinglebereket gebredingle

        1,211819




        1,211819






























            draft saved

            draft discarded




















































            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.




            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            Guess what letter conforming each word

            Port of Spain

            Run scheduled task as local user group (not BUILTIN)