Skip to content

Commit 7437bc9

Browse files
leezngleezng
authored
Merge pull request #87 from luhis/dev
linted example code and made readme consistent
2 parents 3710142 + 83e511b commit 7437bc9

File tree

4 files changed

+125
-55
lines changed

4 files changed

+125
-55
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ The CSS file is included separately and needs to be imported manually. You can e
4040
4141
<script>
4242
import VueJsonPretty from 'vue-json-pretty'
43-
import 'vue-json-pretty/lib/styles.css';
43+
import 'vue-json-pretty/lib/styles.css'
4444
4545
export default {
4646
components: {
@@ -58,7 +58,7 @@ export default {
5858
import Vue from 'vue'
5959
import VueJsonPretty from 'vue-json-pretty'
6060
61-
Vue.component("vue-json-pretty", VueJsonPretty);
61+
Vue.component("vue-json-pretty", VueJsonPretty)
6262
```
6363

6464
2. In `nuxt.config.js`

‎example/App.vue‎

Lines changed: 120 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,69 @@
11
<template>
22
<div class="example">
33
<div class="example-box">
4-
<h2 class="title">EXAMPLE 1</h2>
4+
<h2 class="title">
5+
EXAMPLE 1
6+
</h2>
57
<div class="block">
68
<h3>JSON:</h3>
7-
<textarea v-model="val"></textarea>
9+
<textarea v-model="val" />
810

911
<h3>Options:</h3>
1012
<div class="options">
1113
<div>
1214
<label>showLength</label>
13-
<input type="checkbox" v-model="showLength">
15+
<input
16+
v-model="showLength"
17+
type="checkbox"
18+
>
1419
</div>
1520
<div>
1621
<label>showLine</label>
17-
<input type="checkbox" v-model="showLine">
22+
<input
23+
v-model="showLine"
24+
type="checkbox"
25+
>
1826
</div>
1927
<div>
2028
<label>showDoubleQuotes</label>
21-
<input type="checkbox" v-model="showDoubleQuotes">
29+
<input
30+
v-model="showDoubleQuotes"
31+
type="checkbox"
32+
>
2233
</div>
2334
<div>
2435
<label>highlightMouseoverNode</label>
25-
<input type="checkbox" v-model="highlightMouseoverNode">
36+
<input
37+
v-model="highlightMouseoverNode"
38+
type="checkbox"
39+
>
2640
</div>
2741
<div>
2842
<label>collapsedOnClickBrackets</label>
29-
<input type="checkbox" v-model="collapsedOnClickBrackets">
43+
<input
44+
v-model="collapsedOnClickBrackets"
45+
type="checkbox"
46+
>
3047
</div>
3148
<div>
3249
<label>use custom formatter</label>
33-
<input type="checkbox" v-model="useCustomLinkFormatter">
50+
<input
51+
v-model="useCustomLinkFormatter"
52+
type="checkbox"
53+
>
3454
</div>
3555
<div>
3656
<label>deep</label>
3757
<select v-model="deep">
38-
<option :value="2">2</option>
39-
<option :value="3">3</option>
40-
<option :value="4">4</option>
58+
<option :value="2">
59+
2
60+
</option>
61+
<option :value="3">
62+
3
63+
</option>
64+
<option :value="4">
65+
4
66+
</option>
4167
</select>
4268
</div>
4369
</div>
@@ -53,86 +79,125 @@
5379
:highlight-mouseover-node="highlightMouseoverNode"
5480
:collapsed-on-click-brackets="collapsedOnClickBrackets"
5581
:custom-value-formatter="useCustomLinkFormatter ? customLinkFormatter : null"
56-
@click="handleClick">
57-
</vue-json-pretty>
82+
@click="handleClick"
83+
/>
5884
</div>
5985
</div>
6086

6187
<div class="example-box">
62-
<h2 class="title">EXAMPLE 2</h2>
88+
<h2 class="title">
89+
EXAMPLE 2
90+
</h2>
6391
<div class="block">
6492
<h3>JSON:</h3>
65-
<textarea v-model="val"></textarea>
93+
<textarea v-model="val" />
6694

6795
<h3>Options:</h3>
6896
<div class="options">
6997
<div>
7098
<label>selectableType</label>
7199
<select v-model="selectableType">
72-
<option label="-"></option>
100+
<option label="-" />
73101
<option>single</option>
74102
<option>multiple</option>
75103
</select>
76104
</div>
77105
<div>
78106
<label>showSelectController</label>
79-
<input type="checkbox" v-model="showSelectController">
107+
<input
108+
v-model="showSelectController"
109+
type="checkbox"
110+
>
80111
</div>
81112
<div>
82113
<label>selectOnClickNode</label>
83-
<input type="checkbox" v-model="selectOnClickNode">
114+
<input
115+
v-model="selectOnClickNode"
116+
type="checkbox"
117+
>
84118
</div>
85119
<div>
86120
<label>path</label>
87-
<input type="text" v-model="path">
121+
<input
122+
v-model="path"
123+
type="text"
124+
>
88125
</div>
89126
<div>
90127
<label>showLength</label>
91-
<input type="checkbox" v-model="showLength">
128+
<input
129+
v-model="showLength"
130+
type="checkbox"
131+
>
92132
</div>
93133
<div>
94134
<label>showLine</label>
95-
<input type="checkbox" v-model="showLine">
135+
<input
136+
v-model="showLine"
137+
type="checkbox"
138+
>
96139
</div>
97140
<div>
98141
<label>showDoubleQuotes</label>
99-
<input type="checkbox" v-model="showDoubleQuotes">
142+
<input
143+
v-model="showDoubleQuotes"
144+
type="checkbox"
145+
>
100146
</div>
101147
<div>
102148
<label>highlightMouseoverNode</label>
103-
<input type="checkbox" v-model="highlightMouseoverNode">
149+
<input
150+
v-model="highlightMouseoverNode"
151+
type="checkbox"
152+
>
104153
</div>
105154
<div>
106155
<label>highlightSelectedNode</label>
107-
<input type="checkbox" v-model="highlightSelectedNode">
156+
<input
157+
v-model="highlightSelectedNode"
158+
type="checkbox"
159+
>
108160
</div>
109161
<div>
110162
<label>collapsedOnClickBrackets</label>
111-
<input type="checkbox" v-model="collapsedOnClickBrackets">
163+
<input
164+
v-model="collapsedOnClickBrackets"
165+
type="checkbox"
166+
>
112167
</div>
113168
<div>
114169
<label>deep</label>
115170
<select v-model="deep">
116-
<option :value="2">2</option>
117-
<option :value="3">3</option>
118-
<option :value="4">4</option>
171+
<option :value="2">
172+
2
173+
</option>
174+
<option :value="3">
175+
3
176+
</option>
177+
<option :value="4">
178+
4
179+
</option>
119180
</select>
120181
</div>
121182
<div>
122183
<label>use custom formatter</label>
123-
<input type="checkbox" v-model="useCustomLinkFormatter">
184+
<input
185+
v-model="useCustomLinkFormatter"
186+
type="checkbox"
187+
>
124188
</div>
125189
</div>
126190
<h3>v-model:</h3>
127-
<div>{{value}}</div>
191+
<div>{{ value }}</div>
128192
<h3>Current Click:</h3>
129-
<div>path: {{itemPath}}</div>
130-
<div>data: <pre>{{itemData}}</pre></div>
193+
<div>path: {{ itemPath }}</div>
194+
<div>data: <pre>{{ itemData }}</pre></div>
131195
</div>
132196
<div class="block">
133197
<h3>vue-json-pretty:</h3>
134198
<vue-json-pretty
135199
v-if="renderOK"
200+
v-model="value"
136201
:data="json"
137202
:path="path"
138203
:deep="deep"
@@ -143,25 +208,33 @@
143208
:show-line="showLine"
144209
:select-on-click-node="selectOnClickNode"
145210
:collapsed-on-click-brackets="collapsedOnClickBrackets"
146-
v-model="value"
147211
:path-selectable="((path, data) => typeof data !== 'number')"
148212
:selectable-type="selectableType"
149213
:show-select-controller="showSelectController"
150214
:custom-value-formatter="useCustomLinkFormatter ? customLinkFormatter : null"
151215
@click="handleClick(...arguments, 'complexTree')"
152-
@change="handleChange">
153-
</vue-json-pretty>
216+
@change="handleChange"
217+
/>
154218
</div>
155219
</div>
156-
<a style="position: fixed; right: 0; top: 0;" href="https://github.com/leezng/vue-json-pretty" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
220+
<a
221+
style="position: fixed; right: 0; top: 0;"
222+
href="https://github.com/leezng/vue-json-pretty"
223+
target="_blank"
224+
><img
225+
style="position: absolute; top: 0; right: 0; border: 0;"
226+
src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
227+
alt="Fork me on GitHub"
228+
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
229+
></a>
157230
</div>
158231
</template>
159232

160233
<script>
161234
import VueJsonPretty from 'src'
162235
163236
export default {
164-
name: 'app',
237+
name: 'App',
165238
components: {
166239
VueJsonPretty
167240
},
@@ -202,13 +275,17 @@ export default {
202275
path: 'res',
203276
deep: 3,
204277
itemData: {},
205-
itemPath: ''
278+
itemPath: '',
279+
json: {},
206280
}
207281
},
208-
created () {
209-
this.val = JSON.stringify(this.data)
210-
},
211282
watch: {
283+
val(newVal) {
284+
try {
285+
this.json = JSON.parse(this.val)
286+
} catch (err) {
287+
}
288+
},
212289
selectableType (newVal) {
213290
this.renderOK = false
214291
if (newVal === 'single') {
@@ -222,15 +299,8 @@ export default {
222299
})
223300
}
224301
},
225-
computed: {
226-
json () {
227-
try {
228-
this.cache = JSON.parse(this.val)
229-
return this.cache
230-
} catch (err) {
231-
return this.cache || this.data
232-
}
233-
}
302+
created () {
303+
this.val = JSON.stringify(this.data)
234304
},
235305
methods: {
236306
handleClick (path, data, treeName = '') {

‎example/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@ Vue.config.productionTip = false
88
/* eslint-disable no-new */
99
new Vue({
1010
el: '#app',
11-
template: '<App/>',
12-
components: { App }
11+
components: { App },
12+
template: '<App/>'
1313
})

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"build:example": "cross-env EXAMPLE_ENV=true node build/build.js",
1111
"e2e": "node test/e2e/runner.js",
1212
"test": "npm run e2e",
13-
"lint": "eslint --ext .js,.vue src test/e2e/specs"
13+
"lint": "eslint --ext .js,.vue src test/e2e/specs example"
1414
},
1515
"repository": {
1616
"type": "git",

0 commit comments

Comments
 (0)