-
Notifications
You must be signed in to change notification settings - Fork 4.7k
The description of this
in setup is inconsistent with the source code
#1063
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
53dc21c
48261bb
80b0c86
3d4a101
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -76,7 +76,7 @@ Now that we know the **why** we can get to the **how**. To start working with th | |
The new `setup` component option is executed **before** the component is created, once the `props` are resolved, and serves as the entry point for composition API's. | ||
|
||
::: warning | ||
Because the component instance is not yet created when `setup` is executed, there is no `this` inside a `setup` option. This means, with the exception of `props`, you won't be able to access any properties declared in the component – **local state**, **computed properties** or **methods**. | ||
Although the component instance has been created, it is not bound to `this` when the setup is executed, so `this` cannot be used in the setup, and the processing of props is also completed later, this means, with the exception of `props`, you won't be able to access any properties declared in the component – **local state**, **computed properties** or **methods**. | ||
::: | ||
|
||
The `setup` option should be a function that accepts `props` and `context` which we will talk about [later](composition-api-setup.html#arguments). Additionally, everything that we return from `setup` will be exposed to the rest of our component (computed properties, methods, lifecycle hooks and so on) as well as to the component's template. | ||
|
@@ -91,14 +91,14 @@ export default { | |
props: { | ||
user: { | ||
type: String, | ||
required: true | ||
} | ||
required: true, | ||
}, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Could you please revert all of the unrelated formatting changes? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have submitted an inappropriate modification about the comma, thank you for pointing it out |
||
}, | ||
setup(props) { | ||
console.log(props) // { user: '' } | ||
|
||
return {} // anything returned here will be available for the rest of the component | ||
} | ||
}, | ||
// the "rest" of the component | ||
} | ||
``` | ||
|
@@ -298,14 +298,14 @@ Whenever `counter` is modified, for example `counter.value = 5`, the watch will | |
export default { | ||
data() { | ||
return { | ||
counter: 0 | ||
counter: 0, | ||
} | ||
}, | ||
watch: { | ||
counter(newValue, oldValue) { | ||
console.log('The new counter value is: ' + this.counter) | ||
} | ||
} | ||
}, | ||
}, | ||
} | ||
``` | ||
|
||
|
@@ -420,7 +420,7 @@ export default function useUserRepositories(user) { | |
|
||
return { | ||
repositories, | ||
getUserRepositories | ||
getUserRepositories, | ||
} | ||
} | ||
``` | ||
|
@@ -435,14 +435,14 @@ import { ref, computed } from 'vue' | |
export default function useRepositoryNameSearch(repositories) { | ||
const searchQuery = ref('') | ||
const repositoriesMatchingSearchQuery = computed(() => { | ||
return repositories.value.filter(repository => { | ||
return repositories.value.filter((repository) => { | ||
return repository.name.includes(searchQuery.value) | ||
}) | ||
}) | ||
|
||
return { | ||
searchQuery, | ||
repositoriesMatchingSearchQuery | ||
repositoriesMatchingSearchQuery, | ||
} | ||
} | ||
``` | ||
|
@@ -509,24 +509,19 @@ export default { | |
props: { | ||
user: { | ||
type: String, | ||
required: true | ||
} | ||
required: true, | ||
}, | ||
}, | ||
setup(props) { | ||
const { user } = toRefs(props) | ||
|
||
const { repositories, getUserRepositories } = useUserRepositories(user) | ||
|
||
const { | ||
searchQuery, | ||
repositoriesMatchingSearchQuery | ||
} = useRepositoryNameSearch(repositories) | ||
const { searchQuery, repositoriesMatchingSearchQuery } = | ||
useRepositoryNameSearch(repositories) | ||
|
||
const { | ||
filters, | ||
updateFilters, | ||
filteredRepositories | ||
} = useRepositoryFilters(repositoriesMatchingSearchQuery) | ||
const { filters, updateFilters, filteredRepositories } = | ||
useRepositoryFilters(repositoriesMatchingSearchQuery) | ||
|
||
return { | ||
// Since we don’t really care about the unfiltered repositories | ||
|
@@ -535,9 +530,9 @@ export default { | |
getUserRepositories, | ||
searchQuery, | ||
filters, | ||
updateFilters | ||
updateFilters, | ||
} | ||
} | ||
}, | ||
} | ||
``` | ||
|
||
|
Uh oh!
There was an error while loading. Please reload this page.