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