javascript - 拉拉维尔 5 : Get the default value of my select option with onChange event using Vue js

Question

我有一个<select>有 4 <option>号:Straight Line , Double Declining Balance , Unit of Production ，和Sum of Years Digits 。我在编辑部分遇到了困难，因为当我输入 onChange 时事件在我的<select> ，我的默认值不显示。

这是我尝试过的:我使用了 v-if设置我的默认选定值 <select> .

编辑.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>

如何设置我的 <select> 的默认值同时还触发 change事件于 <select> ？

Answer 1

<select>的值已经绑定(bind)到 v-model ，因此您不需要有条件地渲染 <option>就是这样。相反，设置 v-model变量设置为所需的默认值 <option>值，数据绑定(bind)会自动选择 <option> 。 v-model可以根据 asset_edit.asset_depreciation_id 的更改进行设置，使用watcher监控变化:

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
    }
  }
}

假设默认设置的唯一原因也导致 change -事件是调用assetDepreciation() ，你可以在观察者内部调用它:

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