Laravel 5 : How to get the value in data attribute using vue js

Question

I am new in vue js. In our app, we have validation if this value is already exists in the database. I want to improve it by making it a dynamic. So I added to put data attribute in my field whenever the user type anything. My value in mthe data attribute is the table where I will check if this value already exist.

Add.vue

<label>Code <span class="required-field">*</span></label>
       <input type="text" name="code" @keyup="checkCOACode" v-model="coa_code" class="form-control" :data-table="chart_of_accounts">

Add.vue in my method

checkCOACode(e) {
    e.preventDefault();
    var code = this.coa_code;
    var x    = event.target.getAttribute('data-table');

    alert(x);
    return false;
    axios.post("/checkIfCodeExists", {code:code})
        .then((response)  =>  {
            var code_checker = '';
            if (response.data == 0) {
                $('.add-chart-of-account').removeAttr('disabled','disabled');

            }else{
                $('.add-chart-of-account').attr('disabled','disabled');
                code_checker    =   'Code is already exist';
            }
            this.coa_checker_result = code_checker;
        });
},

My value in my x is null.

Question: How do I get the value of my data attribute?

What is event in event.target.getAttribute('data-table');? Shoudn't it be e.target ? — nmfzone
– nmfzone, Commented Oct 21, 2019 at 4:37

Vibha Chosla · Accepted Answer · 2019-10-21 04:36:46Z

1

You can get value of data attribute in vue by adding ref attribute to your text element

<input type="text" ref="coaCode" name="code" @keyup="checkCOACode" v-model="coa_code" class="form-control" :data-table="chart_of_accounts">

And then get that attribute like

checkCOACode(e) {
    e.preventDefault();
    const coa = this.$refs.coaCode
    const coaCode = coa.dataset.table
    alert(coaCode);
    return false;

},

answered Oct 21, 2019 at 4:36

Vibha Chosla

7135 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Angel Over a year ago

Gives me an undefined

Angel Over a year ago

chart_of_accounts" is not defined on the instance but referenced during render

Vibha Chosla Over a year ago

then you have to add chart_of_accounts in your data(){ return { chart_of_accounts: 'your value' } }method

Vibha Chosla Over a year ago

IS chart_of_accounts is your dynamic value or it is a fix string ?

Angel Over a year ago

It is a fix string. that is my name of the table.

|

Collectives™ on Stack Overflow

Laravel 5 : How to get the value in data attribute using vue js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related