We Keep Coding

Vue.js passing data between components

I want to store input-value from App.vue, and use it in another component. How can I do it? I don't need the show the value in the template, I just need the value inside other components function. In JS I could just use a global var, but how can I achieve it in Vue?
App.vue:
<template>
<div id='app'>
<!-- App.vue has search bar -->
<b-form-input #keydown='search' v-model='input'></b-form-input>
<div>
<!-- Here's my other components -->
<router-view />
</div>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return {
input: '',
value: ''
}
},
methods: {
search () {
this.value = this.input
this.input = ''
}
}
}
</script>
Another component:
<template>
<div>
<p>I'm another component</p>
<p>App.vue input value was: {{value}} </p>
</div>
</template>
<script>
export default {
props: ['value'],
data () {
return {
value: ''
}
}
}
</script>
This is the basic logic I'm trying to achieve. Input value in App.vue --> anotherComponent.vue

If components are not parent and child you can use store for this:
More advanced vuex store that should be your default GO TO - NPM.
Or simple solution with js object.
a. Create store.js file and export object with property in which you will store value.
b. Import store.js object to vue scripts and use it simply like:
import Store from 'store.js'
Store.value

Vuejs call other component's method with parameter

I have two components, the first one is for uploading a file and the second one to Show a file. Inside my Upload Component I would like to call the Preview Component and add a Parameter so that a method inside the Preview Component uses a value which is created inside the Upload Component.
So far I have done this:
UploadComponent.vue
<template>
…
<button #click="upload"></button>
<preview-component :url="this.location"></preview-component>
</template >
<script>
import PreviewComponent from '#/js/components/PreviewComponent';
export default {
components: {
'preview-component': PreviewComponent
},
props: ['url'],
data () {
return {
// ...
location: ''
}
},
methods: {
upload() {
// ... upload stuff then update the global var location
this.location = response.data.location;
},
}
}
</script>
This is my Preview Component:
<template>
<div id="body">
///...
</div>
</template>
<script>
export default {
props: ['url'],
methods: {
loadPdf (url) {
//
},
}
}
</script>
So far I am getting the error that url is not defined, so it actually does not sent the url from the UploadCOmponent to the PreviewComponent, how do I manage to sent it?

You got a ninja this in your UploadComponent's template.
It should be <preview-component :url="location"></preview-component>

How to isolate reusable small functions in vuejs

I have a function that let's say generates a random string for generating a token. I have this function in my methods:{} and I use it in my div without any problem.
But I am trying to put this function in it's own separate file so I can import it for future use, so I put a functions.js file inside my src like this:
// /src/functions.js
export default {
// generate tokes
tokenGenerator () { ... }
}
And in my src/components/foo.vue I am importing this file (no issues with importing)
<template>
<div> {{ tokenGenerator }} </div>
</template>
<script>
import tokenGenerator from '../../functions'
export default {
data() {
return ;
}
}
</script>
This should work, but it doesn't. Importing is not the issue, but something else.. the console error shows me that It can not find function tokenGenerator

For one, you seem to be trying to import a single function, but tokenGenerator in your code is a reference to the whole object exported in your functions file.
Secondly, you cannot access plain javascript functions using Vue interpolation {{ ... }}. The template can only reference functions defined as methods on the related Vue instance.
You can use a mixin to do what you want:
// /src/functions.js
export default {
methods: {
// generate tokens
tokenGenerator () { ... }
}
}
<!>
<template>
<div>{{ tokenGenerator }} </div>
</template>
<script>
import mixinFuncs from '../../functions'
export default {
mixins: [ mixinFuncs ],
}
</script>
Here's the documentation on mixins.
If you simply need access to the tokenGenerator function in your Vue script, then you can export it directly and import it:
// /src/functions.js
// generate tokens
export const tokenGenerator = () => {
//...
}
<!>
<template>
<div> {{ token }} </div>
</template>
<script>
import { tokenGenerator } from '../../functions'
export default {
data() {
return {
token: tokenGenerator()
}
}
}
</script>
Here's a working example.

Export it in this way in functions.js:
export class util {
static tokenGenerator() {
//do your stuff here
}
}
In foo.vue:
<template>
<div>{{ tokenGenerator }} </div>
</template>
<script>
import { util } from '../../functions';
export default {
data() {
return {
textData: util.tokenGenerator
}
}
}
</script>

Vue 2 custom component valus is always "undefined"

I'm trying to create a custom component in Vue.
This is the simplest component I could come up with and the value prop is ALWAYS undefined.
<template>
<div>
- {{ value }} -
</div>
</template>
<script>
export default {
props: ['value'],
mounted() {
console.log(this.value);
}
}
</script>
Not doing anything special when I call it:
<el-text-group v-model="testVar"></el-text-group>
{{ testVar }}
The variable testVar shows fine, but the custom component shows nothing?
I've followed a bunch of tutorials and the official docs:
https://v2.vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events
I'm using latest Vue 2.4.2. It seems to work fine with Vue 2.2.x.
I've actually had this issue months ago but thought I would wait to see if something got fixed. But testing again now and the issue is still there. No idea, seems very basic, not sure if there is some change on how to do this?
FILES:
app.js
var component = require('./components/App.vue');
component.router = Vue.router;
new Vue(component).$mount('#app');
App.vue
<template>
<div>
Hello
<hr/>
<test-cpt v-model="testVar"></test-cpt>
</div>
</template>
<script>
export default {
data() {
return {
testVar: 'test'
};
},
components: {
testCpt: require('./TestCpt.vue')
}
}
</script>
TestCpt.vue
<template>
<div>
- {{ value }} -
</div>
</template>
<script>
export default {
props: ['value']
}
</script>

Removing node_modules and reinstalling seemed to fix it.

vue.js passing data from parent single file component to child

Using single file architecture I'm trying to pass data (an object) from a parent component to a child:
App.vue
<template>
<div id="app">
<app-header app-content={{app_content}}></app-header>
</div>
</template>
<script>
import appHeader from './components/appHeader'
import {content} from './content/content.js'
export default {
components: {
appHeader
},
data: () => {
return {
app_content: content
}
}
}
</script>
appHeader.vue
<template>
<header id="header">
<h1>{{ app_content }}</h1>
</header>
</template>
<script>
export default {
data: () => {
return {
// nothing
}
},
props: ['app_content'],
created: () => {
console.log(app_content) // undefined
}
}
</script>
Seems to be such a trivial task and probably the solution is quite simple. Thanks for any advice :)

You're almost there.
In order to send the app_content variable from App.vue to the child component you have to pass it as an attribute in the template like so:
<app-header :app-content="app_content"></app-header>
Now, in order to get the :app-component property inside appHeader.vue you will have to rename your prop from app_component to appComponent (this is Vue's convention of passing properties).
Finally, to print it inside child's template just change to: {{ appContent }}