Data not being passed from Child Data to Parent Props-CodePudding

I have a Request Form Component, and within this request form Component I have a Dropdown Menu Component, which I will link both below. All values in my table are pushed into an object upon hitting the Submit Button. However my dropdown selection is only being picked up by my console.log and not being pushed into the Object.

I'm not so familiar with Vue, so I'm not sure what direction to go in for fixing this. I'll attach the relevant (?) pieces of code below.

Parent Component:

 <SelectComponent :selected="this.selected" @change="updateSelectedValue" />


   export default {
  fullScreen: true,
  name: 'CcRequestForm',
  mixins: [BaseForm],

   name: "App",
  components: {
    SelectComponent,
  },
  data() {
    return {
      selected: "A",
    };
  },

  props: {
    modelName: {
      default: 'CcRequest',
    },

    parentId: {
      type: Number,
      default: null,
    },
  },

  mounted() {
    this.formFields.requester.value = this.currentRequesterSlug;
  },

  destroyed() {
    if (!this.modelId) return;
    let request = this.currentCcRequest;
    request.params = request.params.filter(p => p.id)
  },

  computed: {
    ...mapGetters(['ccTypesForRequests', 'currentRequesterSlug', 'currentCcRequest']),
    ccTypesCollection() {
      return this.ccTypesForRequests.map((x)=>[x.slug, this.t(`cc_types.${x.slug}`)]);
    }
  },

  methods: {
    addParam() {
      this.addFormFields(['params'], {
        slug: '',
        name: '',
        isRequired: true,
        description: '',
        typeSlug: '',
        selected: ''
      });
    },

    deleteParam(idx){
      this.removeFormFields(['params', idx]);
    },

    restoreParam(idx){
      this.restoreFormFields(['params', idx])
    },

    $newObject() {
      return  {
        slug: '',
        name: '',
        isAbstract: false,
        requester: '',
        description: '',
        status: 'inactive',
        params: [],
        selected: ''
      };
    },

    $extraPrams() {
      return {
        parentId: this.parentId,
      };
    },
     updateSelectedValue: function (newValue) {
      this.selected = newValue;
    },
  },
  
  watch: {
    selected: function (val) {
      console.log("value changed", val);
    },
  },
};

Child Component:

    <script>
export default {
  name: "SelectComponent",
  props: {
    selected: String,
   },
   computed: {
    mutableItem: {
      get: function () {
        return this.selected;
      },
      set: function (newValue) {
        this.$emit("change", newValue);
      },
    },
  },
};

CodePudding user response：

You have to define the emit property in the parent component, or else it won't know what to expect. That would look like:

 <SelectComponent :selected="this.selected" @update-selected-value="updateSelectedValue" />

Check out this tutorial for more information: https://www.telerik.com/blogs/how-to-emit-data-in-vue-beyond-the-vuejs-documentation

CodePudding user response：

To update selected property inside the object, in this constellation, you need to update object property manually upon receiving an event, inside of updateSelectedValue method. Other way could be creating a computed property, since it's reactive, wrapping "selected" property.

computed: { 
           selectedValue () {
                    return this.selected
           }
 }

And inside of object, use selectedValue instead of selected:

 return  {
  ...
  selected: selectedValue
 }