Laravel 5: Append input text depends on the selected option vue js

Question

In our application, we have select option. For example in my select option I have 4 values: A, B, C and D. When I select the option C, it will add another input text.

Vue

<div class="form-group">
    <label>Asset Depreciation Method<span class="required-field">*</span></label>
    <select class="form-control" name="asset_depreciation" required="required" @change="assetDepreciation" v-model="asset_depreciation">
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
    </select>
</div>

<div class="form-group periods">
</div>

Script

data: () => ({
        modal_title: 'Add Asset',
        asset_code: '',
        coa_checker_result: '',
        asset_depreciation: '',
    }),
ready()
        {
            this.checkAssetCode();
            this.assetDepreciation();
            this.createData()
        },
        components: {

        },
        //controller
        methods: {
            checkAssetCode(e) {
                e.preventDefault();
                var code = this.asset_code;
                const asset = this.$refs.assetCode
                const table = asset.dataset.table
                axios.post("/checkIfCodeExists", {code:code,table:table})
                    .then((response)  =>  {
                        var code_checker = '';
                        if (response.data == 0) {
                            $('.add-asset').removeAttr('disabled','disabled');
                            // code_checker    =   'wala pang ganitong code';
                        }else{
                            $('.add-asset').attr('disabled','disabled');
                            code_checker    =   'Code is already exist';
                        }
                        this.coa_checker_result = code_checker;
                    });
            },
            assetDepreciation(e){
                e.preventDefault();
                var value = this.asset_depreciation;
                /* UNIT OF PRODUCTION*/
                if(value == 2)
                {
                    alert(value);
                    $('.periods').append(''+
                        '<input type="text" class="form-control" name="period" required="required>"'
                    );
                }

            },

When I selected C, alert will show but it didn't append in my class periods.

Question: How do I append my input field depends on the selected option?

Michael Mano Michael Mano · Accepted Answer · 2019-11-29T00:34:39

First off using jQuery with Vue is frowned apon, You are using a dom manipulation library with a dom rendering library, You can do this much simpler.

By using v-if you can set the element to show if a variable exists, You can also do this with the disabled attribute via :disabled="variable"

<template>
    <section>
        <div class="form-group">
            <label>Asset Depreciation Method<span class="required-field">*</span></label>
            <select class="form-control" name="asset_depreciation" required="required" @change="assetDepreciation" v-model="asset_depreciation">
                <option value="0">A</option>
                <option value="1">B</option>
                <option value="2">C</option>
                <option value="3">D</option>
            </select>
        </div>

        <div class="form-group periods">
            <input v-if="show_input" type="text" class="form-control" name="period" required="required">
        </div>
    </section>
</template>
<script>
export default {
data: () => ({
        modal_title: 'Add Asset',
        asset_code: '',
        coa_checker_result: '',
        asset_depreciation: '',
        show_input: false,
    }),
ready()
        {
            this.checkAssetCode();
            this.assetDepreciation();
            this.createData()
        },
        components: {

        },
        //controller
        methods: {
            checkAssetCode(e) {
                e.preventDefault();
                var code = this.asset_code;
                const asset = this.$refs.assetCode
                const table = asset.dataset.table
                axios.post("/checkIfCodeExists", {code:code,table:table})
                    .then((response)  =>  {
                        var code_checker = '';
                        if (response.data == 0) {
                            $('.add-asset').removeAttr('disabled','disabled');
                            // code_checker    =   'wala pang ganitong code';
                        }else{
                            $('.add-asset').attr('disabled','disabled');
                            code_checker    =   'Code is already exist';
                        }
                        this.coa_checker_result = code_checker;
                    });
            },
            assetDepreciation(e){
                e.preventDefault();
                var value = this.asset_depreciation;
                /* UNIT OF PRODUCTION*/
                if(value == 2)
                {
                    alert(value);
                    this.show_input = true;
                }

            },
    }
}

Since you have the select bound using v-model you dont need the assetDepreciation method either, you can do a <input v-if="asset_depreciation == 2" type="text" class="form-control" name="period" required="required">

Below is what I would do.

<template>
  <section>
    <div class="form-group">
      <label for="asset_depreciation">
          Asset Depreciation Method<span class="required-field">*</span>
      </label>
      <select
        id="asset_depreciation"
        class="form-control"
        name="asset_depreciation"
        required="required"
        v-model="asset_depreciation"
      >
        <option value="0">A</option>
        <option value="1">B</option>
        <option value="2">C</option>
        <option value="3">D</option>
      </select>
    </div>
    <button :disabled="button_disabled" @click="someMethod">Add Asset</button>
    <div class="form-group periods">
      <input
        v-if="asset_depreciation == 2"
        type="text"
        class="form-control"
        name="period"
        required="required"
      />
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      modal_title: "Add Asset",
      asset_code: "",
      button_disabled: true,
      coa_checker_result: "",
      asset_depreciation: ""
    };
  },
  mounted() {
    this.checkAssetCode();
    this.createData();
  },
  methods: {
    someMethod() {
        // yada yada
    },
    checkAssetCode(e) {
      e.preventDefault();
      var code = this.asset_code;
      const asset = this.$refs.assetCode;
      const table = asset.dataset.table;
      axios
        .post("/checkIfCodeExists", { code: code, table: table })
        .then(response => {
          this.button_disabled = response.data != 0;
        });
    },
  }
};

Laravel 5: Append input text depends on the selected option vue js

1 Answers