vue-select“必需”属性未按预期工作

o75abkj4  于 2023-03-09  发布在  Vue.js
关注(0)|答案(3)|浏览(366)

我正在使用Vue-select,并希望使下拉强制,但看起来它是不工作。
尝试了所需的,规则,但没有运气。

<v-select label="name"
  :close-on-select="true"
  v-model="CurrentAssignment"
  v-on:input="onSelection"
  :reduce="app => app.id"
  placeholder="Select"
  :options="EligibleOptions" :clearable="false"
  >
</v-select>

感谢您的意见。

jdzmm42g

jdzmm42g1#

我假设您使用的是Vue-select(通过查看reduce prop和v-select语法),文档中已经提供了验证指南,您需要结合使用required prop和搜索范围的slot。
这是一个演示,其中当提交事件将被触发的选择下拉列表将显示一个错误,并自动打开。

**注意-**我使用表单的提交事件触发验证。您可以使用您的提交逻辑。

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    CurrentAssignment: null,
    EligibleOptions: [
      'foo',
      'bar',
      'baz'
    ]
  },
  methods: {
    checkForm() {}
  }
})
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<div id="app">
  <form
    id="app"
    @submit="checkForm"
    action="https://vuejs.org/"
    method="post"
    >
    <v-select label="name"
      :close-on-select="true"
      v-model="CurrentAssignment"
      placeholder="Select"
      :options="EligibleOptions" 
      :clearable="false"
      >
      <template #search="{attributes, events}">
        <input
          class="vs__search"
          :required="!CurrentAssignment"
          v-bind="attributes"
          v-on="events"
          />
      </template>
    </v-select>
    <button type="submit">Submit</button>
  </form>
</div>
cyvaqqii

cyvaqqii2#

使用**:rulesprop代替required,并向其提供如下required**方法:

模板

|-----------------|
<v-select :rules="[required]"></v-select>

脚本

methods: {
    required: (v) => !!v || "field required"
  }
b91juud3

b91juud33#

通过使用此规则属性,您可以将其从数据传递到该v-select

rules: {
  select: [(v) =>  v.length>0 || "This field is required"],
}

并将此数据添加到v-select组件,如下所示:

<v-select label="name"
                                          :close-on-select="true"
                                          v-model="CurrentAssignment"
                                          v-on:input="onSelection"
                                          :rules="rules.select"
                                          :reduce="app => app.id"
                                          placeholder="Select"
                                          :options="EligibleOptions" :clearable="false"
                                          >
                                </v-select>

相关问题