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>
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 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
I am making a vue history quiz app, I have my questions retrived from an API. I want to show the questions, the correct answers and the user’s answers at the ResultScreen view. The way I have gone about it is to push the question into an array and $emit it. I can see it being stored in my vue tools, but for some reason it does not show in the component I want to show it in and consequently in on the resultScreeen.
The currentQuestion is an object that holds the question and the answers.
[the code that emits the array.]
storeQuestion: function (value) {
value = this.submitData.questionArray1
this.$emit('storeData', value)
console.log(value, 'my pants are on fire')
}
shows vue tools at it has been stored.
[the component where I want to project it and the function that will not show the question.]
<template>
<div>
<QuizQuestion
v-if="questions.length"
:currentQuestion="questions[index]"
#storeData="storeQuestion"
/>
<p v-if="questions">{{ questions }}</p>
<p v-else=""> loading.....</p>
</div>
</template>
<script>
// import { mapGetters } from 'vuex'
import QuizQuestion from '#/components/QuizQuestion.vue'
// se på gameplay hvor vi returner numcorrect, numtotal og numpoints, vi må se på hvordan vi kan importere verde
export default {
name: 'GameOver',
components: {
QuizQuestion
},
data () {
return {
questions: ''
}
},
methods: {
storeQuestion: function (value) {
this.questions = value
alert(value)
}
}
}
</script>
this.submitData.questionArray1.push(this.currentQuestion.question)
The problem lies in your template, specifically, this line:
<p v-if="questions">{{ storeQuestion() }}</p>
Because the method storeQuestion does not return a string value, it returns undefined regardless of what the value of questions is.
Without knowing the shape of the data being stored in questions is, it's hard to know exactly what code you want, but I suspect you want something like:
<p v-if="questions">{{ questions.text }}</p>
...or perhaps...
<p v-if="questions">{{ questions[index].text }}</p>
...or the like.
However, ancillary to your question about how to display something, your data structure is confusing me. I would expect a data variable called questions to be an Array, not at Object (especially since you're using Array access methods (such as .length and questions[index] on it. I suspect you'll have some additional changes to make, but that's beyond of the scope of your question about displaying info in the v-if statement.