I have been stuck on this for the past couple hours trying to figure this out.

I am trying to have a child component update its props that were past from the parents at the start of the rerender. Since the value is coming from a fetch call, it takes a bit of time to get the value so I understand that the child component will be past a 'null' variable. But once the fetch call is completed, the value is updated but the child component still has the original null value.

During my search for a solution, I found that another way was to use Vuex Stores, so I implemented it with the count variable and had a button to call a commit and later dispatch with an action function to the store to increment it's value but when the increment happens, it doesn't show the new value on the screen even though with console logs I confirmed it did change the value when the function was called.

I guess I don't fully understand the how to update the value of a variable without reassigning it within it's own component or having to call a separate function manually right after I change the value of a data variable.

Thanks in advanced!

App.vue

<template>
  <div id="app">
    <div id="banner">
     <div>Title</div>
    </div>

    <p>count: {{count}}</p> // a small test i was doing to figure out how to update data values
    <button @click="update">Click </button>

    <div id="content" >
      <CustomDropdown title="Title Test" :valueProps="values" /> // passing the data into child component

    </div>

  </div>
</template>
<script>
import CustomDropdown from './components/CustomDropdown.vue'

export default {
  name: 'App',
  components: {
    CustomDropdown,
  },
  data() {
    return {
      values: null
      count: this.$store.state.count
    }
  },
  methods: {
    update() {
      this.$store.dispatch('increment')
    }
  },
  async created() {
    const response = await fetch("http://localhost:3000/getIds", {
            method: 'GET',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-Type': 'application/json'
              }
    });
    const data = await response.json();
    this.values = data // This is when I expect the child component to rerender and show the new data. data is an array of objects
    console.log("data", data, this.values) // the console log shows both variables have data
  }
}
</script>

CustomDropDown.vue

<template>
    <div id="dropdown-container" >
        <b-dropdown  variant="outline-dark" :text="title" :disabled="disabled">
            <b-dropdown-item
                v-for="value in values"
                :key="value.DIV_ID"
                href="#">
                {{value.name}}
            </b-dropdown-item>
        </b-dropdown>
    </div>
</template>

<script>

export default {
    name: 'CustomDropdown',
    components: {},
    props: {
        title: String,
        valuesProp: Array,
        disabled: Boolean
    },  
    data() {
        return {
            values: this.valuesProp
        }
    },
    methods: {
    },
    created() {
        console.log("dropdown created")
        console.log(this.valuesProp) //Always undefined
    }
}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state() {
        return {
            count: 0,
            divisionIds: []
        }
    },
    mutations: {
        increment (state) {
            console.log("count", state.count)
            state.count  
        }
    },
    actions: {
        increment (state) {
            console.log("count action", state.count)
            state.commit('increment')
        }
    }
})

CodePudding user response：

data in your child component CustomDropdown.vue is not reactive: therefore the value of this.values is not updated when the prop changes. If you want to alias a prop, use computed instead:

export default {
    name: 'CustomDropdown',
    components: {},
    props: {
        title: String,
        valuesProp: Array,
        disabled: Boolean
    },
    computed: {
        values() {
            return this.valuesProp;
        }
    },
    created() {
        console.log("dropdown created");
    }
}

If you want to console log the most updated values of this.valuesProp, you will need to watch it: the same if you want for this.values.

CodePudding user response：

One thing you can do is to use a v-if in your child component to only render it after you get your result from you api.

It would be something like:

<CustomDropdown title="Title Test" :valueProps="values" v-if="values"/>

This way you would make sure that your child component gets rendered only when values are available.

It would only be a bad solution if this api call took so long and you needed to display the child component data to the user before that.