Assigning a prop value to data in a Vue Component

Question

<template>
    <div class="container p-2">
        <form id="Lookup">
            <div class="row p-2">
                <div class="col-12 input-group ">
                    <input type="text" name="postcode"   :placeholder="initial" v-model="location" class="form-control p-3"><div class="input-group-append"><i class="material-icons input-group-text" @click="$emit('findlocation', location)">location_searching</i></div>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
    export default{
        props: ['initial'],
        data: function () {
            return {
              location : this.initial
            }
        }
    }
</script>

The above is my Vue Component which is passed a string value called initial This value is passed from the template below

<practicesearch-component @findlocation="getlocation" :initial=postalTown" />

where postalTown is a data property of the main vue

but instead of getting the string value of postalTown in location I get

function String() { [native code] }

the prop initial in the Vue Component shows the correct string value but location has been assigned a function What am I doing wrong?

Answer 1

When Vue initializes your component, the data function does not have access to the View Model this . You can use the mounted hook to assign the value

export default {
    props: ['initial'],
    data: () => ({
        location: undefined
    }),
    mounted() {
        this.location = this.initial;
    }
}

Note that this way, whenever initial changes in the parent, location will not be updated .

Here is a quick sample:

 Vue.productionTip = false; Vue.component('child', { template: ` <div class="child"> Child component: <br/> location: {{ location }} <br/> initial: {{ initial }} </div> `, props: { initial: String }, data: () => ({ location: undefined }), mounted () { this.location = this.initial; } }); new Vue({ el: '#app', template: ` <div class="parent"> Parent Component <br/> location: {{ location }} <child :initial="location" /> </div> `, data: () => ({ location: 'US' }) }); 

 .parent { background-color: darkgray; padding: 1em; border: solid 1px black; color: white; } .child { background-color: gray; padding: 1em; border: solid 1px black; color: white; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div> 

Answer 2

After much analysis I found the problem that was causing this behaviour.

<practicesearch-component @findlocation="getlocation" :initial=postalTown" />

postalTown in the above was not set initially in the Vue instance but within mounted therefore the component was being passed an uninitialised string object and not the initialised value of postalTown

I added the :key attribute on postalTown as below which causes the component to re-render with the initialised value of postalTown Perhaps this is not the best option but it works

<practicesearch-component @findlocation="getlocation" :key=postalTown :initial=postalTown ></practicesearch-component>