11Vue . component ( "values-box" , {
2- props : [ "values" , "size" , "maxlength" , "name" , "placeholder" ] ,
2+ props : [ "values" , "v-values" , " size", "maxlength" , "name" , "placeholder" ] ,
33 data : function ( ) {
44 let values = this . values ;
55 if ( values == null ) {
66 values = [ ] ;
77 }
8+
9+ if ( this . vValues != null && typeof this . vValues == "object" ) {
10+ values = this . vValues
11+ }
12+
813 return {
9- "vValues " : values ,
14+ "realValues " : values ,
1015 "isUpdating" : false ,
1116 "isAdding" : false ,
1217 "index" : 0 ,
@@ -26,7 +31,7 @@ Vue.component("values-box", {
2631 this . cancel ( )
2732 this . isUpdating = true ;
2833 this . index = index ;
29- this . value = this . vValues [ index ] ;
34+ this . value = this . realValues [ index ] ;
3035 var that = this ;
3136 setTimeout ( function ( ) {
3237 that . $refs . value . focus ( ) ;
@@ -38,41 +43,41 @@ Vue.component("values-box", {
3843 }
3944
4045 if ( this . isUpdating ) {
41- Vue . set ( this . vValues , this . index , this . value ) ;
46+ Vue . set ( this . realValues , this . index , this . value ) ;
4247 } else {
43- this . vValues . push ( this . value ) ;
48+ this . realValues . push ( this . value ) ;
4449 }
4550 this . cancel ( )
46- this . $emit ( "change" , this . vValues )
51+ this . $emit ( "change" , this . realValues )
4752 } ,
4853 remove : function ( index ) {
49- this . vValues . $remove ( index )
50- this . $emit ( "change" , this . vValues )
54+ this . realValues . $remove ( index )
55+ this . $emit ( "change" , this . realValues )
5156 } ,
5257 cancel : function ( ) {
5358 this . isUpdating = false ;
5459 this . isAdding = false ;
5560 this . value = "" ;
5661 } ,
5762 updateAll : function ( values ) {
58- this . vValeus = values
63+ this . realValues = values
5964 } ,
6065 addValue : function ( v ) {
61- this . vValues . push ( v )
66+ this . realValues . push ( v )
6267 } ,
6368
6469 startEditing : function ( ) {
6570 this . isEditing = ! this . isEditing
6671 }
6772 } ,
6873 template : `<div>
69- <div v-show="!isEditing && vValues .length > 0">
70- <div class="ui label tiny basic" v-for="(value, index) in vValues " style="margin-top:0.4em;margin-bottom:0.4em">{{value}}</div>
74+ <div v-show="!isEditing && realValues .length > 0">
75+ <div class="ui label tiny basic" v-for="(value, index) in realValues " style="margin-top:0.4em;margin-bottom:0.4em">{{value}}</div>
7176 <a href="" @click.prevent="startEditing" style="font-size: 0.8em; margin-left: 0.2em">[修改]</a>
7277 </div>
73- <div v-show="isEditing || vValues .length == 0">
74- <div style="margin-bottom: 1em" v-if="vValues .length > 0">
75- <div class="ui label tiny basic" v-for="(value, index) in vValues " style="margin-top:0.4em;margin-bottom:0.4em">{{value}}
78+ <div v-show="isEditing || realValues .length == 0">
79+ <div style="margin-bottom: 1em" v-if="realValues .length > 0">
80+ <div class="ui label tiny basic" v-for="(value, index) in realValues " style="margin-top:0.4em;margin-bottom:0.4em">{{value}}
7681 <input type="hidden" :name="name" :value="value"/>
7782 <a href="" @click.prevent="update(index)" title="修改"><i class="icon pencil small" ></i></a>
7883 <a href="" @click.prevent="remove(index)" title="删除"><i class="icon remove"></i></a>
0 commit comments