! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

data 변경시 화면에 반영이 안되는 경우 > Q&A | 토론

본문 바로가기

VueJS data 변경시 화면에 반영이 안되는 경우

페이지 정보

작성자 nice 작성일 2021-07-22 18:16 조회 6,190회 댓글 2건
제품 버전 : 5.20202.699
컨트롤 이름 : 그리드

본문

안녕하세요.

항상 자세한 답변 감사드리며 질문하나 드리겠습니다.


vue js 을 사용합니다.


=> jsp 

===========================================================================================

<script language="javascript1.2" type="text/javaScript">


     var data2 = [];

    var vue1  = null;


     data2.push({productaa:'a11', productbb:'b1', productcc:'c1', productdd:'d1', productee:'e1'});

    data2.push({productaa:'a1', productbb:'b2', productcc:'c3', productdd:'d4', productee:'e5'});

   

    var dataheader = [{ cells: [ { binding: 'productaa', header: 'Product-a' }]}

                     ,{ cells: [ { binding: 'productbb', header: 'Product-b' }]}

                     ,{ cells: [ { binding: 'productcc', header: 'Product-c' }]}

                     ,{ cells: [ { binding: 'productdd', header: 'Product-d' }]}

                     ,{ cells: [ { binding: 'productee', header: 'Product-e' }]}

                      ]; 


// 버튼 클릭 이벤트 

function test1()

{

var datavue = vue1.$data.data;

        

    data2.push({productaa:'1a1', productbb:'1b1', productcc:'1c1', productdd:'1d1', productee:'1e1'});

    data2.push({productaa:'1a1', productbb:'1b1', productcc:'1c1', productdd:'1d1', productee:'1e1'});

    data2.push({productaa:'1a1', productbb:'1b1', productcc:'1c1', productdd:'1d1', productee:'1e1'});

   

    vue1.$data.data[0].productaa="1112222";

   

vue1.$data.data  = data2; 

}


System.import('${pageContext.request.contextPath}/vuejs/app2.vue');

</script>


<body>

<div id="app2">

</div>

<button type="button" class="btn-sm" onclick="javascript:test1();"> 데이터변경 </button>

</body>

==========================================================================


=> app2.vue

==========================================================================

<template>

  <div class="container-fluid">


       <label>

            Custom Headers:

            <input

                type="checkbox"

                checked @click="checkboxClicked($event)"/>

        </label> 


      <p>다시 합시다. </p>


      <wj-multi-row

            :itemsSource="data"

            :layoutDefinition="layout1"

            :headerLayoutDefinition="headerLayout1"

        ></wj-multi-row>

  </div>

</template>


<script>

    import "@grapecity/wijmo.styles/wijmo.css";

    import "bootstrap.css";

    import Vue from "vue";

    

    import "@grapecity/wijmo.vue2.grid";

    import "@grapecity/wijmo.vue2.grid.multirow";


    import * as wjcGrid from '@grapecity/wijmo.grid';

    

    import { getData, getLayoutDefinition, getHeaderLayoutDefinition } from './data2.js';


    

    vue1 = new Vue({

        el: "#app2"

      , data: function() 

        {

            let customHeaderLayout = getHeaderLayoutDefinition();

            return {

                data: data2,

                layout1: dataheader,

                headerLayout1: dataheader,

                customHeaderLayout: dataheader

            };

        }

        ,

        methods: {

            checkboxClicked: function (event) {

                this.headerLayout = event.target.checked ? this.customHeaderLayout : null;

            }

        }

    });



</script>


<style>

  .wj-flexgrid {

      height: 150px; 

      margin: 10px 0;

  }

  .extra-col {

      background: rgb(255,255,125);

  }


  .wj-multirow {

    height: 400px;

    margin: 6px 0;

    }

</style>

==========================================================================

코딩은 위와 같습니다.

버튼 클릭시 test1() 함수로 오는데요..
data 추가, 변경시 그리드도 동시에 변경처리 되야 할것 같은데 안되네요.

결론은 바인딩 된 데이터 추가/변경/삭제시 그리드에도 현재 세팅된 데이터로 보여주고 싶습니다.

확인 부탁드립니다.



  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

볶음이님의 댓글

볶음이 작성일

개인적으로는 grid init할때 grid 객체를 전역함수에 저장해두고 itemsource가 되는 data를 collectionView로 만들고 필요한 부분에서 추가/삭제/수정 등을 하고 데이터를 그리드에 반영하기 위해 this.grid.collectionView.refresh()를 써서 갱신해주니 반영되었어요.
그리드 refresh 찾아서 적용해보시는걸 추천드려요 ㅋㅋ

GCK루시님의 댓글의 댓글

GCK루시 작성일

볶음이님 안녕하세요 그레이프시티입니다.

고객님의 친절한 정보 공유 감사 드립니다.  :)

감사합니다.
그레이프시티 드림.

1 답변

VueJS Re: data 변경시 화면에 반영이 안되는 경우

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK루시 작성일 2021-07-23 16:35 댓글 0건

본문

안녕하세요 그레이프시티입니다.


문의 주신 FlexGrid에 바인딩된 데이터를 변경 시 그리드에 변경 사항이 반영되도록 구현하기 위해서는 refresh 메서드를 사용하시면 됩니다. 더불어, Wijmo의 CollectionView 클래스를 이용하여 컨트롤에 바인딩할 시 UI 컨트롤에서 데이터를 쉽게 관리할 수 있는 기능을 제공합니다. 

FlexGrid의 데이터를 앞서 언급한 CollectionView 클래스 데이터로 바인딩 한 후, 데이터 변경 시, 해당 데이터 CollectionView의 sourceCollection 속성에서 접근하여 해당 속성에서 데이터를 변경 및 추가해주신 다음, 현재 뷰를 재생성하는 그리드의 collectionView에 refresh() 하시면 데이터 변경이 그리드에 반영된 것을 확인하실 수 있습니다. 자세한 코드는 아래 샘플에서 확인하시길 바랍니다.





추가적으로, CollectionView의 trackChanges를 true로 설정하는 경우, 그리드 데이터의 추가/삭제/편집과 같은 변경 사항을 별도 컬렉션에 업데이트하실 수 있습니다. 해당 기능은  아래 데모 사이트에서 확인 가능하오니 참고 부탁 드립니다. 


변경 내용 추적 : https://demo.grapecity.co.kr/wijmo/learn-wijmo/Core/CollectionView/EditingViews/TrackingChanges/vue 


다른 궁금한 점이 생기면, 언제든 문의 주시기 바랍니다.


감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.