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
Related
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?
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 1 year ago.
Improve this question
I'm working with code in vuejs :
data() {
return {
name:'',
age: '',
}
}
created() {
// Get name and age values from methods
console.log(this.name, this.age) //result null
},
methods: {
changeValue:function (name, age) {
this.name = name,
this.age = age,
console.log(name, age); // result : rooney, 20
}
}
I want to pass values from methods to created(), how do I pass it? Give me ideas, thanks
In VueJs you cannot pass values between lifecycle hooks.
However in the created hook, all reactive elements are already hooked up to your instance, so you can access your data objects as shown in the official documentation example.
what happens in your example
since created is called immediatly after your component is instantiated and reactivity has been set up (before it is attached to DOM elements), all your data will contain its default values. In this case for both elements that is ''.
Any calls to the changeValue method from outside will happen after your component is mounted. For more information on this, please check the vue documentation
A guess to what you tried to do
in the comments you mention that you set a name using localStorage.setItem('name', name). Now, vue has no direct link to localstorage. All reactivity in vue happens through the data defined in the data block, which is accessible through this in most other places. If you want a parent component to pass this value to your component, you can do so with props (a.k.a properties/parameters). Or if you want to pass it from a child to a parent, you can do so using v-model.
reacting to those changes can then be done using watchers on those data values or properties
code example
props() {
name:{type: String, default: ''},
age: {type: Number, default: -1},
}
watch:{
name: function(oldName, newName){
//this triggers when name is changed
console.log(this.name, this.age)
localStorage.setItem('name', newName)
}
},
methods: {
changeValue:function (name, age) {
this.name = name,
this.age = age,
console.log(name, age); // result : rooney, 20
}
}
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 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>