Javascript 获取Vuejs中的当前元素类列表

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

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

但是

此

不是指Vuejs中的当前元素

在JavaScript中，

这个

引用了当前元素，但这里的情况不同

---

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

在该输入中添加一个

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

---

在该输入中添加一个

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

---

如果插件添加了类，那么可以使用ref查找

用户名

，

密码

等不是为每个表单输入一个顶级模型，而是创建一个包含

错误

和封装该表单的

值的
表单
模型

然后在验证后，将
this.form.errors[字段]
与错误一起设置，然后该错误将应用于
：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
      })
    }

如果插件添加了类，那么可以使用ref查找

用户名
，
密码
等不是为每个表单输入一个顶级模型，而是创建一个包含
错误
和封装该表单的
值的
表单
模型

然后在验证后，将
this.form.errors[字段]
与错误一起设置，然后该错误将应用于
：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
      })
    }


您在哪里定义
类列表
？@Boussadjrahim我想检查当前元素是否有类名，这就是我们在JavaScript中获取当前元素类列表的方式。您在哪里定义
类列表
？@Boussadjrahim我想检查当前元素是否有类名，这就是我们在JavaScript中获取当前元素类列表的方式。我在我的页面中有很多输入，不使用
ref
？refs是访问DOM元素的vue方式，如果您有许多输入使用
v-for
呈现，您可以像
：ref=“'input'+index”
和
danger=“$refs”那样动态['input'+index].$el.classList.contains（'invalid'）”
我得到了这个错误：
属性或方法“index”没有在实例上定义，而是在呈现过程中被引用。
索引应该在v-for like
v-for=“（项，索引）中定义在items'
中，我的页面中有许多输入，是否可以不使用
ref
？refs是访问DOM元素的vue方式，如果您有许多输入使用
v-for
呈现，您可以像
：ref=“'input'+index”
和
danger=“$refs['input'+index]”那样进行动态处理。$el.classList.contains（'invalid'））“
我收到此错误：
属性或方法“index”未在实例上定义，但在渲染期间引用。
索引应在v-for like
v-for=“（项，索引）中定义。”在items'
中，我使用
vee-validate
进行验证，您的方式是编写我自己的验证，因此我想前面的方式更适合我。不过，谢谢。@AlirezaA2F因为您使用的是
vee-validate
，所以您应该尝试使用的范围槽，它提供了一个
无效的
标志，可以绑定到您的
危险道具。我正在使用
vee-validate
进行验证，您的方式是编写我自己的验证，所以我想前面的方式更适合我。谢谢。@AlirezaA2F因为您正在使用
vee-validate
，所以您应该尝试使用的作用域插槽，它提供了一个
无效的
标志，可以绑定到您的
危险
道具