Laravel 5: Get the default value of my select option with onChange event using Vue js

Question

I have a <select> that has 4 <option> s: Straight Line , Double Declining Balance , Unit of Production , and Sum of Years Digits . I'm having a hard time in the edit part because when I put the onChange event on my <select> , my default value doesn't show.

Here's what I tried: I used a v-if to set the default selected value of my <select> .

Edit.vue

<div class="col-md-4 col-sm-12 col-xs-12">
    <div class="form-group" v-if="asset_edit.asset_depreciation_id == 0">
        <label>Asset Depreciation Method <span class="required-field">*</span></label>
        <select class="form-control asset-depreciation" name="edit_asset_depreciation" required="required" @change="assetDepreciation" v-model="asset_depreciation">
            <option value="0" selected>Straight Line</option>
            <option value="1">Double Declining Balance</option>
            <option value="2">Units of Production</option>
            <option value="3">Sum of Years Digits</option>
        </select>
    </div>
    <div class="form-group" v-else-if="asset_edit.asset_depreciation_id == 1">
        <label>Asset Depreciation Method <span class="required-field">*</span></label>
        <select class="form-control asset-depreciation" name="edit_asset_depreciation" required="required" @change="assetDepreciation" v-model="asset_depreciation">
            <option value="0">Straight Line</option>
            <option value="1" selected>Double Declining Balance</option>
            <option value="2">Units of Production</option>
            <option value="3">Sum of Years Digits</option>
        </select>
    </div>
    <div class="form-group" v-else-if="asset_edit.asset_depreciation_id == 2">
        <label>Asset Depreciation Method <span class="required-field">*</span></label>
        <select class="form-control asset-depreciation" name="edit_asset_depreciation" required="required" @change="assetDepreciation" v-model="asset_depreciation">
            <option value="0">Straight Line</option>
            <option value="1">Double Declining Balance</option>
            <option value="2" selected>Units of Production</option>
            <option value="3">Sum of Years Digits</option>
        </select>
    </div>
    <div class="form-group" v-else>
        <label>Asset Depreciation Method <span class="required-field">*</span></label>
        <select class="form-control asset-depreciation" name="edit_asset_depreciation" required="required" @change="assetDepreciation" v-model="asset_depreciation">
            <option value="0">Straight Line</option>
            <option value="1">Double Declining Balance</option>
            <option value="2">Units of Production</option>
            <option value="3" selected>Sum of Years Digits</option>
        </select>
    </div>
    // In my add, this will appear then the asset depreciation mtehod is Unit of Production, thats why I used the if statement,
    <div class="form-group periods" v-if="asset_edit.asset_depreciation_id == 2">
        <label>Period</label>
        <input type="number" class="form-control" name="periods" v-bind:value="asset_edit.period">
    </div>
</div>

How do I set the default value of my <select> while also triggering a change event on the <select> ?

Answer 1

The <select> 's value is already bound to v-model , so you don't need to conditionally render the <option> s in that manner. Instead, set the v-model variable to the value of the desired default <option> value, and the data binding will automatically select the <option> . The v-model could be set upon changes to asset_edit.asset_depreciation_id , using a watcher to monitor the changes:

export default {
  props: {
    asset_edit: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      asset_depreciation: null
    };
  },
  watch: {
    "asset_edit.asset_depreciation_id": {
      handler(value) {
        this.asset_depreciation = value
      },
      immediate: true
    }
  }
}

Assuming the only reason for the default setting to also cause a change -event is to invoke assetDepreciation() , you could just call it inside the watcher:

watch: {
  "asset_edit.asset_depreciation_id": {
    handler(value) {
      this.asset_depreciation = value
      this.assetDepreciation(value) // invoke the select's change-handler
    },
    immediate: true
  }
}