Vue El-Select doesn't work as expected while passing value from parent to child using watch

Question

Component A

  <el-select v-model="value" placeholder="Select Action" @change="updateDropdowns($event)" prop="action">
     <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
     >
   </el-option>
</el-select>

<tableview 
    :action="this.value"
    v-show="false">
</tableview>

<script> 
  export default {
     name: 'warehouseAdd',
     components: {
       tableview
     },
     props: [
      'component'
  ],
  

  data() {
   return {
    options: [
    {
      value: 'add',
      label: 'Add'
    }, {
      value: 'edit',
      label: 'Edit'
    }
  ],
  value: '',

Component B

<script>
   props: [
     'action'
   ],
   watch: {
     'action': function (value) {
         console.log(value); 
         //Select value from dropdown doesn't pass the value at 1st attempt.
         //If I again select the value from dropdown then I get the value.
      }
   }

Here whenever I try to get value.. I am unable to get value on first event. I need value once I select value from dropdown. I might be doing something wrong not exactly sure.. new to VueJs.

Please let me know how do I pass value at 1st instance to Component B.

Although I am getting the value in Component A on first attempt just not getting at Component B

I am able to fetch dropdown value in parent component but unable to fetch the same in child component when I initially select the value for 1st time. When I change the value of dropdown 2nd time then I get the value in child component.

Thanks!

Answer 1

In your question title you said that El-Select doesn't work as expected. Actually it works as expected. When you reload the page, all Vue data come back to their initial values. So when you set value: '' in component A (that I called it parentTable in my following codes), then after reloading the page the value of '' comes back to that value data. If you want to store the value of selected item before reloading page, there are some solutions to that. One of them is using Window localStorage. Here is the codes that works for me:

parentTable.vue component:

<template>
<div>
  <el-select v-model="value" placeholder="Select Action">
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    >
    </el-option>
  </el-select>

  <tableview
      :action="this.value"
      v-show="false">
  </tableview>
</div>
</template>

<script>
import tableview from "./tableview";
export default {
  name: "parentTable",
  components: {
    tableview
  },


  data() {
    return {
      options: [
        {
          value: 'add',
          label: 'Add'
        }, {
          value: 'edit',
          label: 'Edit'
        }
      ],
      value: null,
    }
  },

  watch: {
    value: function (newVal) {
      this.getValueOf(newVal);
    }
  },

  methods: {
    getValueOf: function (storeValue) {
      localStorage.setItem("option", storeValue);
    }
  },

  mounted() {
    /* Here we get the previous selected item from localStorage */
    this.value = localStorage.getItem("option");
  }
}
</script>

<style scoped>

</style>

tableview.vue component:

<template>

</template>

<script>
export default {
  name: "tableview",
  props: [
    'action'
  ],
  watch: {
    action: function (value) {
      console.log(value);
    }
  }
}
</script>

<style scoped>

</style>