From 8a9721d3f07ed772bbf6449bedd012711277be00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B3=B0?= <chenfengjw@gmail.com>
Date: Mon, 25 Mar 2019 17:18:15 +0800
Subject: [PATCH] fix value change and height not resize

---
 example/build/webpack.dev.conf.js | 10 +++++++---
 lib/json-viewer.vue               |  6 ++++++
 package.json                      |  2 +-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/example/build/webpack.dev.conf.js b/example/build/webpack.dev.conf.js
index 6b9ca22..88370bd 100644
--- a/example/build/webpack.dev.conf.js
+++ b/example/build/webpack.dev.conf.js
@@ -1,7 +1,9 @@
 const path = require('path');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
+    mode: 'development',
     entry: './example/app.js',
     output: {
         path: path.join(__dirname, '../dist'),
@@ -9,7 +11,8 @@ module.exports = {
     },
     devtool: 'cheap-module-source-map',
     devServer: {
-        port: 8081
+        port: 8081,
+        disableHostCheck: true
     },
     resolve: {
         extensions: ['.js', '.vue'],
@@ -26,8 +29,8 @@ module.exports = {
                 exclude: /node_modules/
             },
             {
-                test: /\.css$/,
-                use: ['vue-style-loader', 'css-loader', 'autoprefixer-loader']
+                test: /\.s?css$/,
+                use: ['vue-style-loader', 'css-loader', 'sass-loader']
             },
             {
                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
@@ -59,5 +62,6 @@ module.exports = {
             template: './example/index.html',
             inject: true
         }),
+        new VueLoaderPlugin(),
     ]
 }
diff --git a/lib/json-viewer.vue b/lib/json-viewer.vue
index 2c22f4a..016b710 100644
--- a/lib/json-viewer.vue
+++ b/lib/json-viewer.vue
@@ -82,6 +82,11 @@ export default {
       expandCode: false
     }
   },
+  watch: {
+    value() {
+      this.onResized()
+    }
+  },
   computed: {
     jvClass () {
       return 'jv-container ' + this.theme + (this.boxed ? ' boxed' : '')
@@ -96,6 +101,7 @@ export default {
   methods: {
     onResized () {
       this.$nextTick(() => {
+        console.log(this.$refs.jsonBox.$el.clientHeight)
         if (this.$refs.jsonBox.$el.clientHeight >= 250) {
           this.expandableCode = true
         } else {
diff --git a/package.json b/package.json
index 50d6b4d..e2a808e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-json-viewer",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "vuejs展示json的组件",
   "main": "dist/vue-json-viewer.js",
   "files": [