在Vue.js中获取当前元素类列表

如何解决在Vue.js中获取当前元素类列表

我正在尝试选择Vuejs中的当前元素，这是我的代码：

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

但是this并不是指Vuejs中的当前元素。

在JavaScript中，this引用了当前元素，但是这里有所不同。

我想知道如何解决这个问题。

解决方法

在该输入中添加ref，然后使用$refs.input.$el.classList：

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

,

如果插件添加了一个类，则可以使用引用的方式进行查找。

不是为每个表单输入username，password等拥有顶级模型，而是制作一个form模型，其中包含errors和values该表格。

然后在验证后，将错误设置为this.form.errors[theField]，然后将该错误应用于:danger-text和:danger="form.errors.password"。

这也使从服务器端处理错误变得更加容易，因为您只需将错误放回模型中即可。

例如：

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" />