안녕하세요! composition api로 프론트 개발 진행중입니다.프론트 개발은 처음이라 많이 해매고 찾아보고 하는데 그래도 안되서 질문 남깁니다.현재 개발해야하는 부분은 v-for로 데이터를 불러와서 테이블에 뿌려주고 테이블에 있는 수정 버튼을 클릭하면 input으로 변경해서 수정할 수 있도록 해야 합니다.<table><tr v-for="item in list" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}<button @click="edit"></td></tr></table>이렇게 코드가 있을 떄 edit 버튼을 클릭했을 때 <td>{{item.name}} ... </td> 가<td><input type="text" value={{item.name}} /> </td> 로 변경이 되어야 하는데javascript나 jquery는 td자체를 없애고 input tag를 추가하는 식으로 하면 될것 같은데vue에서는 dom 요소에 직접 접근하지 않는 것으로 알고 있는데이런 상황을 어떤 식으로 코딩을 진행해야 해결할 수 있을까요?

일단 그리드 라이브러리를 쓰시길 추천드립니다.

<td>{{item.name}}<button @click="edit"></td><td><p>{{item.name}}<button @click="edit"></p><span style="display:none;"><input type="text" value={{item.name}} /></span></td>위처럼 태그로 묶어서 P태그와 SPAN 태그를 toggle 하는 방식은 어떠실까요?

edit btn 에 바인딩하는 플래그를 하나 만듭니다. 클릭하면 반전합니다.const editFlag = ref(false) const flagClick = ()=>{editFlag.value = !editFlag.value}변경될 태그를 2개 작성합니다.작성해주신 거에선<td>{{item.name}} ... </td> <td><input type="text" value={{item.name}} /> </td> 이거 두개겠죠.v-if 로 두개를 표시합니다/<td v-if="!editFlag ">{{item.name}} ... </td> <td v-else><input type="text" value={{item.name}} /> </td>

<td v-if="isVisiable">{{item.name}} ... </td><td v-if="!isVisiable"><input type="text" value={{item.name}} /> </td> <button @click="isVisiable = !isVisiable"></td> onclick 시 isVisiable 을 true | false 로 toggle 식으로하면 되지않을까요?