Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c27ac62

Browse files
committed
updated readme
1 parent 685c112 commit c27ac62

File tree

1 file changed

+50
-4
lines changed

1 file changed

+50
-4
lines changed

‎README.md‎

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Build Vue-like components in React (watch, computed & no more setState)
66

77
`$ npm install --save-dev react-vue-component`
88

9-
# Usage
9+
# Basic Usage
1010

1111
- ```jsx
1212
import {Component} from "react-vue-component";
@@ -16,7 +16,7 @@ Build Vue-like components in React (watch, computed & no more setState)
1616
name: "Bob",
1717
}
1818
mounted() {
19-
19+
this.name="Albert";
2020
}
2121
watch {
2222
name(newName, oldName) {
@@ -30,11 +30,14 @@ Build Vue-like components in React (watch, computed & no more setState)
3030
}
3131
methods {
3232
changeName() {
33-
this.name = "John"; // Changing name will also change the computed property fullName
33+
// Changing name will also change the computed property fullName
34+
this.name = "John";
3435
}
3536
}
3637
render() {
37-
const {name, obj} = this; // states, methods, and computed properties can be accessed directly via `this` just like in Vue
38+
// states, methods, and computed properties can be accessed directly via `this` just like in Vue
39+
const {name, fullName, changeName} = this;
40+
3841
return (
3942
<div>
4043
<p>{name}</p>
@@ -45,3 +48,46 @@ Build Vue-like components in React (watch, computed & no more setState)
4548
}
4649
}
4750
```
51+
52+
## Objects
53+
54+
- In Vue, in order to "reactively" add/delete key-value pairs from an object, you will need to use `set(obj, key, value)`and `delete(obj,key)`respectively.
55+
56+
```jsx
57+
import {Component} from "react-vue-component";
58+
class App extends Component {
59+
state = {
60+
obj : {
61+
name: "Prev"
62+
}
63+
}
64+
methods {
65+
addToObj() {
66+
this.set(this.obj, "age", 20);
67+
}
68+
deleteName() {
69+
this.delete(this.obj, "name");
70+
}
71+
}
72+
watch {
73+
"obj.name" : (newName, oldName) => {
74+
console.log("Obj.name has changed");
75+
}
76+
"obj.age" : (newAge, oldAge) => {
77+
console.log("Obj.age has changed");
78+
}
79+
}
80+
render() {
81+
const {obj} = this;
82+
return (
83+
<div>
84+
Object.keys(obj).map(key =>
85+
<p><strong>{key}</strong>: {obj[key]}</p>
86+
)
87+
<a onClick={() => this.addToObj()}>Add new key</a>
88+
<a onClick={() => this.deleteName()}>Delete name</a>
89+
</div>
90+
)
91+
}
92+
}
93+
```

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /