Vuejs - 동적으로 구성 요소를 div에 연결

Question

간단한 블로그 응용 프로그램을 구축 중입니다. 이 응용 프로그램에서는 블로그 제목 목록을 가지고 블로그 제목 (링크 또는 div에서)을 클릭하면 블로그 제목 바로 아래에 동적으로 블로그 내용 (서버에서 데이터를 가져 오는 간단한 구성 요소)을 표시하려고합니다. 하지만 클릭 한 Div에 구성 요소를 연결하는 방법을 알 수 없습니다. 다음은 "블로그 TITLE1"사업부이 사업부에 "인사"구성 요소를 연결하고 다른 사업부의에서 제거해야합니다 ("블로그 제목 3"에서이 경우) 클릭이 예제에서 jsfiddle https://jsfiddle.net/x8g3d5wn/6/

입니다. 이런 종류의 문제에 대해 조언하거나 다른 간단한 해결책이 있습니까? 고맙습니다.

<div id="app">  
     <div class="redColor hClass"> 
     Blog Title1 
     </div>  
     <div class="grayColor hClass"> 
     Blog Title2 
     </div>  
     <div class="tealColor hClass"> 
     Blog Title3 
     <greeting></greeting>  
     </div>  
    </div> 


Vue.component('greeting', { 
    template: '<h1>Blog Text</h1>{{ message }}', 
    data: { 
    message: 'hello' 
    } 
}); 

var app = new Vue({ 
    el: '#app', 
    data: function() { 
    return { 
     msg: 'Hello World! This is a Event listener test1.' 
    } 
    } 
}); 

Answer 1

시도해보십시오.

구조가 조금 어둡습니다. 비록 그것이 사용될 수 있지만, vue는 jquery의 대체물이 아닙니다. 보다 자연스러운 방법은 블로그 게시물을 배열에 저장하고 구성 요소를 통해 표시하는 것입니다.

Vue.component('blog', { 
 
    template: '<div :class="post.className"><h1>{{post.title}}</h1><p v-if="show">{{ post.description }}</p></div>', 
 
    props: ['post', 'show'] 
 
}); 
 

 
var app = new Vue({ 
 
    el: '#app', 
 
    data: function() { 
 
return { 
 
\t open: -1, 
 
    blogposts: [ 
 
    {title:"Blog Title 1", description: "Ipsum to the Lorem", className:'redColor'}, 
 
    {title:"Blog Title 2", description: "Ipsum to the Lorem", className:"grayColor"}, 
 
    {title:"Blog Title 3", description: "Ipsum to the Lorem"} 
 
    ] 
 
} 
 
    }, 
 
    methods: { 
 
    \t openPost(i){ 
 
\t if (this.open === i) { 
 
    \t this.open = null 
 
    } 
 
    else { 
 
    \t this.open = i 
 
    } 
 
} 
 
    } 
 
});

.redColor { 
 
    background-color:red; 
 
} 
 

 
.grayColor { 
 
    background-color:#999; 
 
} 
 

 
.tealColor { 
 
    background-color:teal; 
 
} 
 

 
.hClass{ 
 
    min-height:50px; 
 
    width:150px; 
 
    margin-top:20px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
 
<div id="app"> 
 
<blog v-for="(b, i) in blogposts" :key="i" :post="b" :show="open === i" @click.native="openPost(i)"/> 
 
</div>

JS 바이올린 : https://jsfiddle.net/x8g3d5wn/9/