posva / Vue Reactive Refs
Licence: mit
Make $refs reactive so they can be used in computed properties and watchers
Stars: ✭ 144
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Vue Reactive Refs
Rsocket Rpc Java
Standard RSocket RPC Java Implementation
Stars: ✭ 126 (-12.5%)
Mutual labels: reactive
Feign Reactive
Reactive Feign client based on Spring WebFlux
Stars: ✭ 131 (-9.03%)
Mutual labels: reactive
Redux Most
Most.js based middleware for Redux. Handle async actions with monadic streams & reactive programming.
Stars: ✭ 137 (-4.86%)
Mutual labels: reactive
Easyreact
Are you confused by the functors, applicatives, and monads in RxSwift and ReactiveCocoa? It doesn't matter, the concepts are so complicated that not many developers actually use them in normal projects. Is there an easy-to-use way to use reactive programming? EasyReact is born for this reason.
Stars: ✭ 1,616 (+1022.22%)
Mutual labels: reactive
R2dbc Pool
Connection Pooling for Reactive Relational Database Connectivity
Stars: ✭ 141 (-2.08%)
Mutual labels: reactive
Reduxmoviedb
🎥 See the upcoming movies! ReSwift + RxSwift 💖 Hacktoberfest 🎃
Stars: ✭ 137 (-4.86%)
Mutual labels: reactive
R2dbc Mssql
R2DBC Driver for Microsoft SQL Server using TDS (Tabular Data Stream) Protocol
Stars: ✭ 128 (-11.11%)
Mutual labels: reactive
Vertx In Action
Examples for the Manning "Vert.x in Action" book
Stars: ✭ 134 (-6.94%)
Mutual labels: reactive
Callbag Basics
👜 Tiny and fast reactive/iterable programming library
Stars: ✭ 1,619 (+1024.31%)
Mutual labels: reactive
Marble
Marble.js - functional reactive Node.js framework for building server-side applications, based on TypeScript and RxJS.
Stars: ✭ 1,947 (+1252.08%)
Mutual labels: reactive
Rapidoid
Rapidoid - Extremely Fast, Simple and Powerful Java Web Framework and HTTP Server!
Stars: ✭ 1,571 (+990.97%)
Mutual labels: reactive
Combine Mvvm
Sample project with Combine & UIKit framework, MVVM architecture
Stars: ✭ 132 (-8.33%)
Mutual labels: reactive
Kefir
A Reactive Programming library for JavaScript
Stars: ✭ 1,769 (+1128.47%)
Mutual labels: reactive
Js Libs
A collection of JavaScript libraries for Ethereum dapp development.
Stars: ✭ 141 (-2.08%)
Mutual labels: reactive
Reactive forms
This is a model-driven approach to handling form inputs and validations, heavily inspired in Angular's Reactive Forms
Stars: ✭ 135 (-6.25%)
Mutual labels: reactive
vue-reactive-refs
Make $refs reactive so they can be used in computed properties and watchers
Extremely Light < 0.2kb 🗜
Installation
npm install vue-reactive-refs
Usage
This library exposes two different plugins: ReactiveRefs
and
DynamicReactiveRefs
and you should only use one of them
ReactiveRefs
Supports all browsers but requires you to manually declare refs
in component
options.
import { ReactiveRefs } from 'vue-reactive-refs'
import Vue from 'vue'
Vue.use(ReactiveRefs)
MyComponent.vue
<template>
<div>
<input ref="input" />
<button v-for="button in actions" ref="buttons">{{ action }}</button>
</div>
</template>
<script>
export default {
// this is necessary
refs: ['input', 'buttons'],
computed: {
// NOTE: this is definitely not what you should use this lib for, but it's
// the easiest example
inputValue() {
return this.$refs.input && this.$refs.input.value
},
// Same for this example. It's ALWAYS better to mapping your data (the source of truth)
// and avoid at all cost mapping information to the DOM
buttonsText() {
return this.$refs.buttons && this.$refs.buttons.map(b => b.innerText)
},
},
}
</script>
DynamicReactiveRefs
Supports modern browsers (not IE) that support
Proxy
and works out of the box:
import { DynamicReactiveRefs } from 'vue-reactive-refs'
import Vue from 'vue'
Vue.use(DynamicReactiveRefs)
MyComponent.vue
<template>
<div>
<input ref="input" />
<button v-for="button in actions" ref="buttons">{{ action }}</button>
</div>
</template>
<script>
export default {
computed: {
// NOTE: this is definitely not what you should use this lib for, but it's
// the easiest example
inputValue() {
return this.$refs.input && this.$refs.input.value
},
// Same for this example. It's ALWAYS better to mapping your data (the source of truth)
// and avoid at all cost mapping information to the DOM
buttonsText() {
return this.$refs.buttons && this.$refs.buttons.map(b => b.innerText)
},
},
}
</script>
Related
- Vue.js issue: https://github.com/vuejs/vue/issues/3842
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].