🐛fixed sprite node attrs update bug

akira-cn · akira-cn · commit 9b7a6de79393 · 2019-04-02T18:39:20.000+08:00
diff --git a/dist/sprite-vue.js b/dist/sprite-vue.js
@@ -36254,7 +36254,7 @@ function updateAttrs(oldVnode, vnode) {
   for (key in attrs) {
     cur = attrs[key];
     old = oldAttrs[key];
-    if (old !== cur) {
+    if (old !== cur || cur.__ob__) {
       setAttr(elm, key, cur);
     }
   }
diff --git a/dist/sprite-vue.min.js b/dist/sprite-vue.min.js
diff --git a/example/test2.html b/example/test2.html
@@ -20,76 +20,23 @@
 const { Vue } = spritevue
 
 Vue.component('my-scene', {
-  states() {
-    return {
-      active: {
-        opacity: 1.0
-      },
-      deactive: {
-        opacity: 0.2
-      }
-    }
-  },
-  actions: [
-    {
-      both: ['active', 'deactive'],
-      action: {
-        duration: 1000,
-        easing: 'ease-in-out'
-      }
-    }
-  ],
   data () {
     return {
       viewport: [600, 600],
-      text: 'Hello',
-      items: [
-        { id: 'stop-btn', bgcolor: 'red', state: 'deactive' },
-        { id: 'warn-btn', bgcolor: '#fc0', state: 'deactive' },
-        { id: 'pass-btn', bgcolor: 'green', state: 'deactive' }
-      ],
-      attrs: {
+      ccc: {
         bgcolor: 'blue'
       }
     }
   },
-  mounted() {
-    console.log(this.$refs)
-  },
-  methods: {
-    enter (index) {
-      console.log('enter')
-      this.items[index].state = 'active'
-    },
-    leave (index) {
-      console.log('leave')
-      this.items[index].state = 'deactive'
-    },
-    tap (index, evt) {
-      console.log(index, evt)
-      // this.$set(this.attrs, 'bgcolor', 'red')
-      this.attrs.bgcolor = 'red'
-      this.attrs = { ... this.attrs }
-    },
-    changed (evt) {
-      console.log('state changed!', evt)
-    }
+  mounted () {
+    // console.log(this.$refs)
+    this.ccc.bgcolor = 'red'
+    // this.attrs = { ... this.attrs }
   },
   template: `
     <scene id="container" :viewport=viewport>
       <layer id="fglayer">
-        <group width="500" display="flex" y="100" justifyContent="space-between" bgcolor="grey">
-          <sprite v-if="index < 2" v-for="(item, index) in items" :size="[50, 50]"
-            :key="'sp'+index"
-            ref="sp"
-            :bgcolor="item.bgcolor"
-            v-on:mouseenter="enter(index)"
-            v-on:mouseleave="leave(index)"
-            v-on:click="tap(index, $event)"
-            :states="states" :actions="actions" :state="item.state"
-            v-on:state-to-active="changed"></sprite>
-        </group>
-        <sprite :attrs="attrs" :size="[100, 100]" :pos="[200, 200]"></sprite>
+        <sprite :attrs="ccc" :size="[100, 100]" :pos="[200, 200]"></sprite>
       </layer>
     </scene>
   `
@@ -100,8 +47,14 @@
   data() {
     return {
       state: true,
+      attrs: {
+        bg: 'background:blue'
+      }
     };
   },
+  mounted () {
+    this.attrs.bg = 'background: red'
+  },
   methods: {
     toggle() {
       console.log(111);
@@ -110,7 +63,7 @@
   },
   template: `
   <div>
-    <h1 @click="toggle"> abc </h1>
+    <h1 @click="toggle" :style="attrs.bg"> abc </h1>
     <div v-if="state">
       <my-scene></my-scene>
     </div>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sprite-vue",
-  "version": "0.21.8",
+  "version": "0.21.9",
   "description": "A Vue.js project for SpriteJS",
   "author": "akira-cn <akira.cn@gmail.com>",
   "main": "src/index.js",
diff --git a/src/web/runtime/modules/attrs.js b/src/web/runtime/modules/attrs.js
@@ -37,7 +37,7 @@ function updateAttrs (oldVnode: VNodeWithData, vnode: VNodeWithData) {
   for (key in attrs) {
     cur = attrs[key]
     old = oldAttrs[key]
-    if (old !== cur) {
+    if (old !== cur || cur.__ob__) {
       setAttr(elm, key, cur)
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -36254,7 +36254,7 @@ function updateAttrs(oldVnode, vnode) {`
`36254`	`36254`	`for (key in attrs) {`
`36255`	`36255`	`cur = attrs[key];`
`36256`	`36256`	`old = oldAttrs[key];`
`36257`		`- if (old !== cur) {`
	`36257`	`+ if (old !== cur \|\| cur.__ob__) {`
`36258`	`36258`	`setAttr(elm, key, cur);`
`36259`	`36259`	`}`
`36260`	`36260`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "sprite-vue",`
`3`		`- "version": "0.21.8",`
	`3`	`+ "version": "0.21.9",`
`4`	`4`	`"description": "A Vue.js project for SpriteJS",`
`5`	`5`	`"author": "akira-cn <[email protected]>",`
`6`	`6`	`"main": "src/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ function updateAttrs (oldVnode: VNodeWithData, vnode: VNodeWithData) {`
`37`	`37`	`for (key in attrs) {`
`38`	`38`	`cur = attrs[key]`
`39`	`39`	`old = oldAttrs[key]`
`40`		`- if (old !== cur) {`
	`40`	`+ if (old !== cur \|\| cur.__ob__) {`
`41`	`41`	`setAttr(elm, key, cur)`
`42`	`42`	`}`
`43`	`43`	`}`