<table >
<tr>
<th>a</th>
<th>b</th>
</tr>
<tr v-for="article in articles" >
<td>{{article.a}}</td>
<td>{{article.b}}</td>
</tr>
</table>
위 와같이 한뒤에 new Vue(...) 으로 값을 바인딩하여 가져온후, 새로 가져 오려고 하면 동작을 하지 않습니다.
아래는 소스 입니다.
주소로 가시면 바로 확인 하실수 있습니다.
---1--- 버튼 클릭시 a1 / b1 a2/b2 로 바뀌고. ---2--- 클릭시 c1/c1 c2/c2 로 바뀌어야 하는데. 변경이 되지 않습니다.
제가 생각 하는 원인은. 이미 v-for 가 사용 되면서 기존에 데이터는 전부 치환이 되어 두번째 에는 <tr v-for="article in articles" > 구문이 없어 나오는 현상으로 파악 됩니다.
그래서 아래 와 같이
function search1(){
for( ;asdf.articles.length > 0;){
asdf.articles.pop()
}
asdf.articles.push({"a":"a1", "b" : "b1"})
}
pop 으로 빼고 push 로 넣어 해결이 된거 같았는데. 받아 온 데이터가 여러개일경우 concat 으로 합치려고 했는데.. 이렇게는 또 안되네여..
해결 방법 아시는분 계신가요?
<HTML>
<head>
<script>
var inner = "";
function init(){
inner = document.getElementById("Search").innerHTML;
}
function search2(){
//document.getElementById("Search").innerHTML = inner;
asdf = new Vue({el: '#Search',
data: { articles: [{"a":"c1", "b" : "c1"},{"a":"c2", "b" : "c2"}]}});
}
function search1(){
//document.getElementById("Search").innerHTML = inner;
asdf = new Vue({el: '#Search',
data: { articles: [{"a":"a1", "b" : "b1"},{"a":"a2", "b" : "b2"}]}});
}
</script>
</head>
<body onload="init()">
<button onclick="search1()">---1---</button>
<button onclick="search2()">---2---</button>
<Div class="Search" id="Search">
<tr>
<th>a</th>
<th>b</th>
</tr>
<tr v-for="article in articles" >
<td>{{article.a}}</td>
<td>{{article.b}}</td>
</tr>
</table>
</Div>
</body>
</HTML>
