Continuing the discussion from Basics: Component building in Meteor + VueJS:
You can use Vuex2 to pass variables to tracker-computer values or does it have to be Vuex1? If it’s possible with Vuex2, will you provide a quick example please when you get a moment?
A quick example:
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
currentThreadId: 'thread/CURRENT_THREAD_ID'
})
},
meteor: {
posts: {
params () {
return this.currentThreadId
},
update (id) {
return Posts.find({ thread_id: id })
}
}
}
}
@akryum are the Resources in akryum:vuex package your idea or was it documented anywhere? I fail to find them anywhere outside of your package. I previously thought your package only provided the handlers for Minimongo inside of Resources, but now I’m not sure.
The idea of resources being initialized and destroyed together with components that use them is a damn powerful one.
It was my idea, and it’s what I want to do in a more generic package.
Whats the syntax for tracker that for example trims a form on a fly given that user basically copy and pastes stuff into it carelessly and you want to give feedback as to what I’m getting out of clutter?
Can you rephrase please?
Im asking about where to stick tracker if it’s not suppose to be a separate data source. Simpler example: form has length limit and will color any text over the length in red. I don’t imagine there’s a way for to make it work without tracker like this?
Do you mean something like that?
<template>
<input v-model="text" :class="{red:isTooLong}">
</template>
<script>
export default {
data() {
return {
text: ''
}
},
computed: {
isTooLong() {
return this.text.length > 200
}
}
}
</script>
<style>
.red {
color: red;
}
</style>
I ommited the “any text over the length” as that’s more complex.
Or if you want to limit the length:
watch: {
text(value) {
this.text = value.substring(0, 200)
}
}
which will trim the input value to 200 characters on every change.
The rule is: don’t use Meteor Tracker for such stuff, but the internal tracker of Vue.
Since font tag is deprecated you’d have to insert span in there with red css using splice. Meteor tracker was everywhere in blaze engine which was slower for it, but one off use isn’t evil. Guide example for watcher doesn’t have conditionals in it.
Can you provide a Blaze example of the conditional you’d like to achieve? Then we can try to rewrite or reuse it in Vue.
Im saying that the example fires off method that uses underscore for (countdown/timeout/delay) and conditionals at that point which is hardly efficient. I doubt that the watcher does “string.length < 200? (method)”.
I may be just missing the point here, as I’m not sure I understand what you want to achieve. But here’s my last attempt.
watch: {
text(value) {
if(value.length > 200) {
this.redSpanMethod(value)
}
}
}
Im speculating that your code may not work since guide’s example would benefit from having *half the code within watcher while resorting to alien library. It’s at least a half arsed solution to tracker.
In fact, with my use case you’d just get away with computed property with setter/getter. Even then I suppose you could just use this.data as both params and update. Also after pondering about this I suspect that using watcher for posts example (by Akryum) the DDP won’t work for method, but will computed property not consider state to be reactive property?
@akryum what if I wanted to track state changes to show/hide save button in fixed navbar, so that after data is loaded into vuex it will remind user to save changes.