CODEWITHSUNDEEP
javascriptvue.jsvuejs2
samiles
samiles

Reputation: 3900

Vue.js Update child component data from within parent

How can I update the data in a child component from within the parent? I am trying to update the autores property from within the parent and have that update the child data. Currently nothing happens, I don't think I have the data linked correctly. If I add it as data to the parent component then the parent re-renders when the code runs and no results can be seen.

Parent:

<template>
    <div>
        <input @keyup="editName(lender.id, $event)">

            <autocomplete-suggestions :autores="[]"></autocomplete-suggestions>

    </div>
</template>

<script type="text/javascript">
    export default {
        props: ['lender'],

        data(){
            return {

            }
        },

        methods: {
            editName: function(lenderid, event) {

                var self = this;

                    axios.post('/lenders/autocomplete', {...})
                        .then(function (data) {

                            self.autores = data.data.suggestions;

                        })
                        .catch(function (error) {
                            console.log("Error occurred getting the autocomplete");
                        });


            },
        },
        watch: {

        },
        mounted: function() {

        }
    };
</script>

Child:

<template>
    <div class="list">
        <div v-for="(res, i) in autores">{{res}}</div>
    </div>
</template>

<script type="text/javascript">
    export default {
        props: ['autores'],
        data(){
            return {

            }
        }
    };
</script>

Update:

If I change my code in parent to:

data(){
    return {
        autores:[]
    }
},

and:

<autocomplete-suggestions :autores="autores"></autocomplete-suggestions>

Then simply whenever I update this.autores, whatever text has been typed into the text box in parent in reset, as if it were rerendering the whole component. How can ths be stopped?

Upvotes: 3

Views: 1873

Answers (1)

masongzhi
masongzhi

Reputation: 164

Parent:

<template>
  <div>
    <input @keyup="editName(lender.id, $event)">
    <autocomplete-suggestions ref="autocompleteSuggestions"></autocomplete-suggestions>
  </div>
</template>

<script type="text/javascript">
  export default {
    props: ['lender'],
    methods: {
      editName: function (lenderid, event) {
        var self = this;
        axios.post('/lenders/autocomplete', {...})
          .then(function (data) {
            self.$refs.autocompleteSuggestions.autores = data.data.suggestions;
          })
          .catch(function (error) {
            console.log("Error occurred getting the autocomplete");
          });
      },
    },
  };
</script>

Child:

<template>
  <div className="list">
    <div v-for="(res, i) in autores">{{res}}</div>
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      autores: []
    };
  },
};
</script>

Upvotes: 2

Related Questions