How can I pass data from .js to .vue?

Question

I am trying to load data into my .vue component file from its parent .js file.

This is my .html file:

<div class="modal-container">
    <section class="modal">
        <modal-component></modal-component>
    </section>
</div>

This is my .js file:

var modal = new Vue({
    el: 'section.modal',
    data: {
        msg: 'Hello world!'
    },
    components: {
        'modal-component': httpVueLoader('./templates/test.vue')
    }
});

This is my .vue file:

<template>
    <section>               
        <p class="test">{{ msg }}</p>
    </section>
</template>

However, when I load the page, this error appears in the console and the value of 'msg' is blank:

[Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

You either need to define msg in modal-component's js file or add a prop for model-component and bind msg to it. Javascript file of model-component is missing in your question. — Mat J
– Mat J, Commented Oct 15, 2019 at 17:27
Missing the code: under </template> add <script> export default { data: () => { return { msg: "my message" }; } } </script> — Max
– Max, Commented Oct 15, 2019 at 17:27

tony19 · Accepted Answer · 2022-07-15 05:48:45Z

1

There are two different Vue instances in play here. The one you create directly using new Vue has a property called msg. The instance corresponding to the child component, modal-component, does not.

There are 3 main types of properties in Vue. data, computed and props.

If you have a property defined on the parent in data then you can pass it down to the child using a prop.

<modal-component :msg="msg"></modal-component>

In your .vue file you would then need to define msg as a prop.

props: ['msg']

Properties are not automatically inherited, you always need to pass them down using props.

Documentation: https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

Without wishing to muddy the waters, this particular example might be better served using a slot but as it's just an example it's difficult to say for sure whether that would really be appropriate.

Update:

In full the file test.vue would be:

<template>
    <section>               
        <p class="test">{{ msg }}</p>
    </section>
</template>

<script>
export default {
  name: 'modal-component',
  props: ['msg']
}
</script>

edited Jul 15, 2022 at 5:48

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 15, 2019 at 17:30

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

James Anderson Over a year ago

Thanks! I've tried what you suggested — passing the properly down to the child using a prop — and it the value of msg ('Hello world!') is now attached to the section element, like so: <section class="modal"><section msg="Hello world!"><p></p></section></section>. However, my p tag is still empty. How would I display the msg data within the p tag?

skirtle Over a year ago

It looks like you haven't declared the prop on the child. If a prop isn't declared it will just be treated as an attribute on the element instead. You need a suitable <script> section in your Vue file including props: ['msg'].

James Anderson Over a year ago

I'm so sorry - I don't follow, I'm a little confused! Would it be possible to see an example of what you mean?

skirtle Over a year ago

@JamesAnderson Updated. I suggest you have a read of vuejs.org/v2/guide/single-file-components.html. It's also unclear from your question why you're using httpVueLoader, though that doesn't change my answer. If you're new to Vue then I highly recommend grabbing a copy of the CLI tool and automatically generating a skeleton project.

Collectives™ on Stack Overflow

How can I pass data from .js to .vue?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related