Hello,
I am trying to bind (two way) a data from the inspector package into a custom component like this:
inspector.js
Vue.component ('inspector', {
template: `
<ui-input v-value="target.myNum.value"></ui-input>
<p>Colors</p>
<template v-for="color in nodeTarget.colors.attrs.default">
<p>{{color.color._val}}</p>
<ui-input v-value="color.right"></ui-input>
</template>
{{displayColors}}
`,
data: function () {
return {
nodeTarget: this.target
}
},
computed: {
// a computed getter
displayColors: function () {
// `this` points to the vm instance
console.log('this.target',this.target);
console.log('this',this);
Editor.Ipc.sendToMain('test:foo-bar', 'Hello, this is simple panel');
//return this.target.colors.attrs.default
}
},
props: {
target: {
twoWay: true,
type: Object
},
},
});
my component (inspector-test.ts):
const {ccclass, property, inspector} = cc._decorator;
@ccclass("Gradient")
class Gradient {
@property()
color: cc.Color = cc.Color.BLACK;
@property({ slide: true, range: [0, 10, 1] })
right: number = 0;
};
@ccclass
@inspector("packages://test/inspector.js")
export default class tester extends cc.Component {
@property([Gradient])
colors: Array<Gradient> = [{
color:cc.Color.BLACK,
right:10
},{
color:cc.Color.BLACK,
right:15
}] //new Array<Gradient>();
@property()
_myNum: number = 0;
@property()
get myNum(){
return this._myNum;
}
set myNum(value:number) {
this._myNum = value;
console.log('ok')
this.node.y = value;
}
start () {
console.log('10',this.colors);
}
}
What am I doing wrong here?