Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 months ago.
Improve this question
this is following question for Vue 3 getting selected date from datepicker
I tried to make $refs as reactive data.
For instance,
<template>
<div>
<input id="datepicker" ref="startDate" type="text" #change="startTrigger>
</div>
</template>
<script>
import DateRangePicker from 'flowbite-datepicker/DatePicker'
export default {
methods: {
startTrigger(event) {
console.log(event.target.value)
}
}
}
</script>
But it didn't trigger any function. There's no log in console.
Not sure this will answer your question because the $refs is not relavent to the reactive. Ref is just the way to obtain the DOM reference.
With your code, you are using #change, which call only after the input is blur for the input [type="text"], that's why your console has no log (And you can remove your ref if you are using event). Can read more here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
If you want the startTrigger called everytime you type, you can use event as #input, #keypress (usually along with the debounce function). Here is the example for you: Are Vue.js and debounce (lodash/underscore) compatible?
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
In Vue, globally-accessible variables do not seem to be the norm. So far, I've found 3 methods to share data between components. In my case, these variables need to be both read and write.
Using Vue instance properties with mutable types.
Vue.prototype.$potato = { a: null }
this.$potato.a = "potato!";
Creating a new Vue instance as a global mixin to store all the data.
let globalData = new Vue({
data: { $potato: null }
});
Vue.mixin({
computed: {
$potato: {
get: function () { return globalData.$data.$potato },
set: function (newPotato) { globalData.$data.$potato = newPotato; }
}
}
});
this.$potato = "potato!";
Using a custom EventBus, by emitting and listening for custom events.
import Vue from 'vue'
export default new Vue()
import EventBus from './EventBus'
EventBus.$emit('_data', payload)
EventBus.$on('_data', () => {})
a. What is the most proper and elegant way to achieve this?
b. What are the performance implications for the above (i.e., which is most efficient)?
I personally like using the first method the most due to its' sheer simplicity. However, instance properties are immutable. This makes me question if using a mutable type (such as an object or array) for the instance property is not something that should be done.
Mixins or globals - in my experience has no noticeable performance difference.
About elegance - mixins are just not very elegant, as well as global. Also, globals are not reactive by default.
If you want to avoid using Vuex - I'd recommend moving all your global data to a separated singleton like this:
my_global.js
export default {
doStuff: function (a,b) { /* do something */ }
state: {
a: 1,
b: 2
}
}
And using it like:
my-component.vue
<template>
<div>{{ state }}</div>
</template>
<script>
import GLOB from 'my-global.js'
export default {
name: 'my-component',
data () {
return { state: GLOB.state }
}
}
</script>
You can also move some global methods to operate with your global data, or just change it in place. Once you used any object inside component data() - it becomes reactive for all the components where it used.
Using Vue.prototype.$xxx is useful for a few read-only injections like global variables.
I have never seen the mixin method you're proposing and it looks very weird, not to mention that mixins should be avoided when possible due to the complex and inelegant way they are to share logic.
Same for the event bus, I've seen it used a few times but it's only useful when there is not a lot of communication, it does not scale well, and it is not officially recommended. It's a hack.
You're probably looking for vuex, the official global state manager for Vue. I highly recommend this library as it is both very simple, and very powerfully integrated in Vue & hooks up without caveats with all the Vue update.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I have a function in computed that needs to use the value from ajax in created function,because of vue lifecycle I can't get the value.
created() {
console.log('1');
ajax.get('/xxx').then((res) => {
console.log('2');
});
},
computed: {
tabs: function() {
console.log('3');
return [....];
}
}
In console I get 1,3,2,3 but if i want to get the value i should get 1,2,3
Is there any solution to this problem?
Make your Vue component fail-safe.
In your case:
Use a flag for AJAX call completion state
Handle computed request with default value if AJAX call not successful
Handle computed request with compute if AJAX call was successful
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 1 year ago.
Improve this question
Does anyone know a library that converts number input to currency format and can be applied to Vue 3, because most use filters that are not currently supported in the Vue 3 version?
You could use a combination of a computed property and Intl.NumberFormat (or some currency npm package).
<template>
<div>{{costCurrency}}</div>
</template>
<script>
const formatter = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'})
export default {
props: {
cost: Number
},
computed: {
costCurrency() {
return formatter.format(cost)
}
}
}
</script>
vue-currency-input supports Vue 3
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
How to use vue hooks-as-events syntax?
for example this.$once('hook:beforeDestroy')
I searched but could not find any references to it in the official docs. Is it deprecated?
for some reason, thats not in the official docs.
you can use the vue instance life cycle hooks as events from the child to the parent,
something like: #hook:destroyed="changeMsg()"
i saw it here
and here is a simple example:
Vue.component('greeting', {
template: '<h1>im the child component</h1>'
});
var vm = new Vue({
el: '#app',
data(){
return {
msg:'not destroyed yet...',
isDead:false
}
},
mounted(){
setTimeout(this.die,4000)
},
methods:{
changeMsg(){
this.msg = 'the child component is destroyed now';
},
die(){
this.isDead = true;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p><b>msg from parent:</b> {{msg}}</p>
<greeting v-if="!isDead" #hook:destroyed="changeMsg()"></greeting>
</div>
This question already has answers here:
jQuery plugin in Vue component: Cannot pass value to prop
(4 answers)
Closed 5 years ago.
I am using a v-model on Redactor. When I do this it returns "Event" not the actual data I'm looking for. Any ideas on how to return the correct data?
HTML
<div id="question-create-form">
<textarea class="form-control question-create-editor" id="question_description" rows="3"></textarea>
</div>
JS
$('#question-create-form .question-create-editor').redactor({
imageUpload:'/urlGoesHereBro/',
plugins: ['video', 'imagemanager', 'counter', 'limiter'],
buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
});
$('#question-create-form .redactor-editor').attr('v-model', 'questionDescription');
Redactor appears to be a jQuery widget, which means it works by manipulating the DOM. Vue expects to control the DOM, which means the two are going to step on each others' toes unless you confine your (Redactor's) DOM manipulations to the lifecycle hooks of a wrapper component.
To make your Redactor component work with v-model, it will need to:
accept a value prop
emit an input event with the new value