Get current element class list in Vuejs

Question

I'm trying to select current element in Vuejs, here's my code:

<vs-input label="Password"
          v-model="password"
          danger-text="Wrong password"
          :danger="this.classList.contains('invalid')"/>

But this is not referring to the current element in Vuejs.

In JavaScript, this referred to current element, but things are different here.

I'm wondering how to solve this problem.

@BoussadjraBrahim I want to check if current element has a class name, this is how we got list of classes of current element in JavaScript. — Alireza A2F
– Alireza A2F, Commented Aug 17, 2020 at 16:54

Boussadjra Brahim · Accepted Answer · 2020-08-17 17:12:09Z

2

Add a ref to that input then use $refs.input.$el.classList :

   <vs-input label="Password"
          v-model="password"
          danger-text="Wrong password"
          ref="input"
          :danger="$refs.input.$el.classList.contains('invalid')"
          />

edited Aug 17, 2020 at 17:12

answered Aug 17, 2020 at 17:01

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

4 Comments

Alireza A2F Over a year ago

I have many inputs in my page, could it be done without using ref?

Boussadjra Brahim Over a year ago

refs is the vue way to get access to DOM element, if you have many input rendered using v-for you could make that dynamic like :ref="'input'+index" and danger="$refs['input'+index].$el.classList.contains('invalid')"

Alireza A2F Over a year ago

I get this error: Property or method "index" is not defined on the instance but referenced during render.

Boussadjra Brahim Over a year ago

the index should be defined in v-for like v-for="(item,index) in items'

Lawrence Cherone · Accepted Answer · 2020-08-17 17:39:47Z

1

There is a cleaner way then using ref's to lookup if the plugin added a class.

Instead of having a top-level model for every form input username, password etc make a form model which contains errors and values which encapsulate that form.

Then upon validation, set this.form.errors[theField] with the error, then that error will be applied to :danger-text and :danger="form.errors.password".

It will also make the error handling from serverside much easier as you simply plop errors back into the model.

For example:

data: () => ({
    form: {
      errors: {},
      values: {
        username:'',
        password: ''
      }
    }
  }),
  methods: {
    submit() {
      this.form.errors = {}

      if (!this.form.values.password) {
        this.form.errors.password = 'Password is a required field.'
      } else if (...) {
        ...
      }

      if (Object.keys(this.form.errors).length) return

      // some ajax call
      ajax.post(..).then((res) => {
        if (res.errors) {
          this.form.errors = res.errors
        } else {

        }
      }).catch(e => {
        // maybe set global alert
      })
    }

<vs-input label="Password" 
          v-model="form.values.password" 
          :danger-text="form.errors.password" 
          :danger="form.errors.password" />

answered Aug 17, 2020 at 17:39

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

2 Comments

Alireza A2F Over a year ago

I'm using vee-validate for validation, your way is for writing my own validation, so I guess the previous way fits better for me. Thanks though.

tony19 Over a year ago

@AlirezaA2F Since you're using vee-validate, you should try ValidationProvider's scoped slot, which provides an invalid flag that could be bound to your danger prop.

Collectives™ on Stack Overflow

Get current element class list in Vuejs

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related