VueJS data 변경시 화면에 반영이 안되는 경우
페이지 정보
작성자 nice 작성일 2021-07-22 18:16 조회 6,258회 댓글 2건본문
관련링크
안녕하세요.
항상 자세한 답변 감사드리며 질문하나 드리겠습니다.
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>