How can I use Vue.set() and Vue.use() in .vue files? I'm using the vue-cli to scaffold my project and I need to use Vue.use(VeeValidate) for validation. Also I would like to use something like following, found here.
Vue.set(example1.items, indexOfItem, newValue)
Since the .vue files export object, How do I get the Vue reference. Also I would like to use it inside my default object exported in .vue files. What I mean is that I need to use Vue.set() on an item present in my data function.
You have to use import wherever you need Vue or vee-validate, you can do it like following inside the script tag:
<script>
import Vue from 'vue'
import VeeValidate from 'vee-validate'
Vue.use(VeeValidate)
...
...
</script>
If you just want to do Vue.set, you can instead do this.$set which is the alias of the global Vue.set.
Your components have Vue.set available as this.$set. For reference: instance methods & properties.
Vue.use is a global method and can be called wherever. It is basically never called inside a component(and might actually throw if you try? Never tried it). Call it wherever you're doing the rest of your initialization.
Related
I want to do this.$router.push(path) inside module file of vuex.
As this is not defined there, how could I perform this.
Just import the router and you'll be able to use it, like this:
import router from 'path/to/router'
router.push(path)
Why does it work like this:
In a Vue file, this is binded to the Vue object which is why you can use certain methods that are available there like $router or $store.
However in a normal JS file this is just binded to the global object that does not contain any of Vue's special functionality, which is why you have to import the router manually.
I have a vue.js application and in the main.js file I have configured the Vuei18n as per the documentation. This is working perfectly and in order to access this in other components, I have added this to new Vue() instance and this is now accessible (with this.$i18n).
Now I have created a validator.js file for validation rules and I need to use the this.$i18n there, but its not working. I have also tried Vue.prototype.$i18n but that too not working. Can someone help me to find out where I went wrong ?
exporting the i18n variable
I'll assume your app is a vue-cli app, or at least that you use webpack to build it
and therefore can use ES modules.
Working with vue-i18n you would do something like the following:
// step 1: define the i18n object via new Vue18n
const i18n = new VueI18n({
locale: DEFAULT_LANGUAGE,
messages,
});
// step 2: setup the Vue object to use this object:
new Vue({
i18n,
... store, router.... whatever
})
Where messages contain all the JSON's with the translations keys and values.
I guess you already are doing something like this.
And now, in your validator module you need the very same i18n object you plugged to Vue.
Instead of trying to get to Vue in your validator, you can just plain export the i18n varible from main.js:
export {i18n}
So, in your validator.js file, you can just import it:
import {i18n} from '#/main.js' // or whatever is the path
This is pretty much how I'm solving the validator internationalization problem in my own application.
Important note: circular dependencies
If you're already importing the validator.js in your main.js, you won't be able to import i18n from main in your validator module. To avoid such a problem, you would move the i18n initialization and exportation to another module, such as i18n.js, so the validator and the main file can import it independently.
Without es6 modules
In case you're not using webpack or another bundler to bundle your code, you can still just export the i18n object to the window object:
window.i18n = i18n
and then use it from whatever file. You just need to be careful to store the i18n object in window before any file will try to access it.
I think what you're looking for is Custom Events. According to this documentation, you should be able to emit your variable with something like below
this.$emit('send-i18n', this.$i18n)
Still according to the documentation, try to use v-on:send-i18n to retreive your value.
Hope it works.
I am new to vue and have a few questions around using a simple business object in my vue single page components. Let's stay I have an object called ResultCalculator. This is a simple javascript class that contains my core business logic for calculating something. Now assume I want to use this object in my Home.vue component. My questions are:
1) Is it best practice to simply create a new file called ResultCalculator.js and
export default class ResultCalculator {...}
2) In order to import this into Home.vue I use the import ResultCalculator from '....ResultCalculator.js'
3) In my create method, I simply new up a new object and assign it to this.resultCalculator.
The above is working for me, but is it best practice?
4) Now I'd like to reference some data in vuex state store. I doesn't seem like I simply use this.$store.getter. How do I reference vuex in this component?
Thanks
Sure, just create a js file and import it to your .vue files there is nothing wrong with that.
You can not use this.$store because in ResultCalculator.js this is not vue. You can either pass this.$store as an argument or just simply import your store to ResultCalculator.js
I'm using a Flask and want to replace the standard Vue delimiters to anything else. I found the following solution here: How can I specify delimiters for a VueJS component with a render method?
I was trying to add this code:
Vue.mixin({
delimiters: ['[[', ']]']
});
Unfortunately, it doesn't work. I have my components in .vue files. I found that the following code in components is called before any Vue.mixin added:
export default {...}
Maybe it's a reason. The new delimiters work only for the main app, but not for components.
The Vue version is 2.5.17. Thanks.
I have some method to generate random hexademical color. It will be used in very few (3 or 5) parts of the project. So I want to separate it from main code into some kind of Helper or smth else, and include it when needed (not globally).
I have 2 working ways to do this:
Using mixins. What I don't like is that when you read the code, you can't separate your own methods from methods of mixin.
Using plugins. What I don't like with that is that you have to write import Vue from 'vue' + Vue.use(MyPlugin) every time in all files where you want to use it. After that, you can call it like this.$ColorHelper.getRandomHEX().
So, the question is about aesthetics visualization.
What is the best practices to do such things?
PS: project was created from template with webpack.
Our team decide use function import from files-helpers
For example:
import { getRandomColor, getBackgroundColor } from 'Global/helpers/colorHelper';
// .....
let color = getRandomColor();
What good:
Don't need use excess import + use as in plugins
Method visually stands out, what it not from this
What bad:
Cant see visually what the helper have method. But possible can fixed with aliases. We dont think yet
Vue plugins are global, you only have to call the Vue.use method once. Then they should work wherever you use that particular Vue instance.
In a default project setup you normally don't have multiple Vue instance so it should work globally.
From the docs:
Plugins usually add global-level functionality to Vue.
And:
Use plugins by calling the Vue.use() global method:
Vue.use(MyPlugin)
https://v2.vuejs.org/v2/guide/plugins.html