I'd like to get access to vm data from outside the instance like so:
myComponent.vue
export default {
data() {
return {
name: 'Joe'
};
}
}
main.js
var vm = new Vue({
el: '#app',
render: h => h(myComponent)
});
Desired Result
console.log(vm.name); // should return - Joe
For some reason, console returns undefined. What I'm doing wrong?
To access vue.js object datas from inside you can use $property_name. Example
var vm = new Vue({
el: '#app',
data() {
return {
name: "Kapucni",
}
},
template: '<div>{{ name }}</div>'
});
// use $name .property
console.log(vm.$data.name);
console.log(vm.$el);
// calling functions from $method, etc ...
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<div id='app'>
</div>
Thanks to comments from ittus, I realised that I have to look for child components, not the root component.
We can get to child component like so:
vm.$children[0].name
where $children[0] is a direct (and first in this case) child of the root component.
Related
One of my root Vue.js components is using an x-template, displayed in 3 different parts of my app (3 separate Vue instances).
Everything is working if I put the data directly into the component, but I can’t figure out how to pass in data to each individual vm instance. Here’s what I’m using at present:
Vue.component('some-table', {
template: '#some-template',
data() {
return { someArray: [] }
},
methods: {
}
});
let someVm = new Vue({
el: '#some-div',
});
The template:
<script id="some-template" type="text/x-template">
<table v-for="(item, id) in someArray" v-bind:key="id">
<tr>
<td>{{item.someKey}}</td>
</tr>
</table>
</div>
</script>
Within another JavaScript class, I’m attempting to push data to someArray:
class SomeClass {
constructor() {
}
someMethod() {
let newData = [1,2,3];
someVm.someArray = newData; // doesn't work
someVm.someArray.push(...newData); // doesn't work
someVm.someArray.concat(newData); // doesn't work
}
}
Using any of the various lines in someMethod() above, I can see someVm contains someArray, but with no observers.
I can’t seem to figure out how to push new data to each instance, then be accessible within some-template. I’m obviously missing something really simple, but I’ve been stuck on this for a while now, so any pointers would be amazing!
Thanks!
Do not set data attr at component registration (Vue.component(...)). Instead, declare the props that component uses and pass it through markup or js.
Vue.config.productionTip = false;
Vue.config.devtools = false;
Vue.component('some-component', {
template: '#some-component',
props: {
message: {
type: String, // declare the props: https://vuejs.org/v2/api/#props
}
}
});
const cp1 = new Vue({
el: '#cp1',
data() {
return {
msg: "using data"
};
}
});
const cp2 = new Vue({
el: '#cp2'
});
const cp3 = new Vue({
el: '#cp3'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script id="some-component" type="text/x-template">
<p>{{message}}</p>
</script>
<div id="cp1">
<some-component :message="msg"></some-component>
</div>
<div id="cp2">
<some-component message="using props"></some-component>
</div>
<div id="cp3" is="some-component" message="using props and is"></div>
in an Express app, I need to pass an object to vue method, here is the ejs template:
<%-item.price%>
<button v-on:click="add_to(<%=item%>)" class="float-right">Add...</button>
here is the js:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
add_to: function (item) {
console.log(item)
}
}
})
but it does not work, any hint? Thanks
You need to enclose the ejs rendering the object you want to pass to the vue.js method with single quote ''
v-on:click="add_to('<%=item%>')"
This must be simple, but haven't cracked it...
In vue, I think I get how to pass props from parent to child components. And I understand that I have an app state in the data member of the vue instance. What I don't understand is how to get the data state into the root app as props.
It seems there are a few ways to organize a vue app, so here's what I'm trying to make work:
index.ts
import app from './app.vue'
export default new Vue({
// App Root Element
el: '#app',
render: (c) => c('app'),
components: {
app
},
data: {
someValue: 42
}
})
app.vue
<template>
<div>
Some Value: {{someValue}}
</div>
</template>
<script lang="ts">
export default {
props: ['someValue']
};
</script>
I assume it should be something like the following, but I don't know how to get a reference directly to the data - unless I keep a reference to it outside of vue for this purpose, but that seems like it should not be necessary:
render: (c) => c('app', { someValue: ??? }),
Use this to get data or property values inside your render method (or methods or computed values, etc). Don't use an arrow function to define your render function if you're going to use this inside it.
new Vue({
el: "#app",
render(c) {
return c('app', {props:{someValue: this.someValue}})
},
components: {
app
},
data: {
someValue: 42
}
})
Example.
console.clear()
const app = {
props: ["someValue"],
template: `<div>Some Value: {{someValue}}</div>`
}
new Vue({
el: "#app",
render(c) {
return c('app', {props:{someValue: this.someValue}})
},
components: {
app
},
data: {
someValue: 42
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
</div>
As #RoyJ pointed out, this is the key section of the documentation.
Everything is fine in my main.js
import User from './components/User.vue'
new Vue({
el: '#user',
render: h => h(User),
data() {
return {
groups: []
}
},
mounted() {
this.getGroups();
},
methods: {
getGroups: function () {
axios.get('http://vagrant.dev/groups')
.then(response => this.groups = response.data)
.catch(error => console.log(error));
}
}
});
User.vue
<template>
<div id="user">
{{groups}} <!-- must be printed but it doesn't seem -->
</div>
</template>
<script>
export default {
name: 'user',
props: ['groups']
}
</script>
and index.html
<div id="user">
<user :groups="groups"></user>
</div>
Where is the mistake?
I do not get any errors, but I didn't understand why the value was not printed on the screen
Seems like you are putting 2 Vue instances on the same template since in your main file you are defining the template as el: "#user" which is already controlled by User.vue.
In you index.html add a div with id="app" and in main.js set el: "#app"
Your main.js and index.html shouldn't mix template in HTML and render function. So your main.js should be:
```new Vue({
el: '#user',
components: { User },
data() {
return {
groups: []
}
},
...```
You shouldn't directly reassign data value because Vue cannot detect property additions and rerender view. You should do it via Vue.set or this.$set like this:
this.$set(this, 'groups', response.data)
You can read more about how vue reactive in https://v2.vuejs.org/v2/guide/reactivity.html and Vue.set API: https://v2.vuejs.org/v2/api/#Vue-set
How can i include data option in child instances in Vue.js?
<html>
<body>
{{ foo }}
<script>
var root = new Vue({
el: 'body'
});
var child = new Vue({
parent: root,
data: function() {
foo: 'bar'
}
});
</script>
</body>
</html>
Here nothing is getting printed in the body. But if i add the foo variable inside the root instance, it's getting printed. How to make the data option work for child instances?
Following is the syntax is to have data attribute in a child vue instance:
const Foo = {
data: function () {
return {
foo: "I am Foo"
}
},
template: '<div>foo: {{foo}}</div>'
}
and you can use this data property only in the template of child instance. You can see the whole working demo in this fiddle.
Another style of creating a vue component and using it can be found here, with JS code.
Vue.component('child', {
data () {
return {
foo: 'bar'
}
},
template: '#foo'
});
var vm = new Vue({
el: '#root'
});