how to access vuejs refs if ref value has bracket character

Question

I would like to access the ref of input, but still getting undefined.

// sample in template template:

<input type="text" class="form-control form-control-sm" v-bind:value=meminfo.last_name name="online_membership[last_name]" ref="online_membership[last_name]" >

Script:

methods() {
   function() {
     // i would like to access the input value of this ref
     this.$refs.online_membership[last_name]
   }
}

Why not use a simpler name? Since your template only has one element, you can also use `this.$el` — Phil, Dec 19 '19 at 05:34
Yeah, would really like to do that but I have to changed a lot in the backend side and stored records in the db. — Jherom Ocado De Jesus, Dec 19 '19 at 05:37
I don't understand. The `ref` is only used by Vue and has nothing to do with your back-end. You might as well use `ref="input"`. FYI, `methods() {` should be `methods: {` — Phil, Dec 19 '19 at 05:39
Just use bracket notation instead of dot notation and also agree with @Phil. — Steven B., Dec 19 '19 at 05:39
I have 2 functions : 1. axios post getting the values placing it into the meminfo which is v-bind. it contains the current information 2. second function, gets another axios post specific to the input field that will replace the current value of the meminfo — Jherom Ocado De Jesus, Dec 19 '19 at 05:44
It's an existing system, we are replacing an old framework and replacing it with vuejs — Jherom Ocado De Jesus, Dec 19 '19 at 05:46

Mahamudul Hasan · Accepted Answer · 2019-12-20T01:13:37.880

you should change something like below:

best practice:

// sample in template template:

<input type="text" class="form-control form-control-sm" v-bind:value=meminfo.last_name name="online_membership[last_name]" :ref="online_membership[last_name]" >

Script:

methods() {
   function() {
     // i would like to access the input value of this ref
     this.$refs[online_membership[last_name]]
   }
}

but still if you want to use as a string including '[' then simply you can use below solution:

// sample in template template:

<input type="text" class="form-control form-control-sm" v-bind:value=meminfo.last_name name="online_membership[last_name]" ref="'online_membership[last_name]'" >

Script:

methods() {
   function() {
     // i would like to access the input value of this ref
     this.$refs['online_membership[last_name]']
   }
}

hope it will solve your problem

thanks man, @Phil already answered my question – Jherom Ocado De Jesus Dec 19 '19 at 05:50 — Jherom Ocado De Jesus, Dec 19 '19 at 05:50

how to access vuejs refs if ref value has bracket character

1 Answers1

Linked