Vue.js v-шоу в списке
Я уверен, что это будет очень легко для вас, ребята. Я пытаюсь сделать простой список постов с заголовками постов, которые всегда видны, и когда вы нажимаете на конкретный пост в списке, вы получаете его текст. Я использовал V-шоу для этого. Однако, когда я нажимаю на конкретное сообщение, появляются тела всех сообщений, а не только те, на которые я нажал.
Вот шаблон:
<template>
<div class="container">
<h1>My Posts</h1>
<ul class="list-group">
<li class="list-group-item" v-for="post in list">
<div @click="changeShow">
<h4>{{ post.title }}</h4>
<p v-show="show">{{ post.body }}</p>
<span v-show="show" class="label label-primary">ID: {{ post.userId }}</span>
</div>
</li>
</ul>
</div>
И логика:
<script>
export default{
data(){
return{
msg:'hello vue',
list: [],
show: false
}
},
ready(){
this.fetchPostList();
},
methods:{
fetchPostList: function () {
var root = 'http://jsonplaceholder.typicode.com';
this.$http.get(root + '/posts').then(function (response) {
this.list = response.data;
})
},
changeShow: function () {
this.show = !this.show;
}
}
}