vue.js - 未设置组件复选框(vue、vee 验证)
问题描述
我的组件 Checkbox 对包含所需规则验证的未初始化表单(注册)正常工作。我继续编辑用户表单,但未能对其进行初始化。布尔属性已设置,但没有效果 - 未选中复选框。您可以在这里自己尝试:https ://codesandbox.io/s/falling-tree-6g8qy 。我已经用谷歌搜索过,有人建议将 v-model 设置为某些属性。但是我使用了一个带有 vee-validate 的组件,并且 v-model 需要发出一个信号。
复选框.vue
<template>
<ValidationProvider
tag="span"
v-model="innerValue"
:vid="vid"
:rules="rules"
:name="name || label"
v-slot="{ errors, required }"
>
<input :id="identifier" v-model="innerValue" :value="identifier" type="checkbox" ref="input">
<label :for="identifier">
<span>{{label}}</span>
</label>
</ValidationProvider>
</template>
<script>
import {ValidationProvider} from "vee-validate";
export default {
props: {
vid: {
type: String,
default: undefined
},
identifier: {
type: String,
default: undefined
},
name: {
type: String,
default: ""
},
label: {
type: String,
default: ""
},
rules: {
type: [Object, String],
default: ""
},
value: {
type: null,
default: ""
},
checked: {
type: Boolean,
default: false
}
},
components: {
ValidationProvider
},
data: () => ({
innerValue: null
}),
watch: {
innerValue(value) {
this.$emit("input", value);
}
}
};
</script>
store.js
export default new Vuex.Store({
actions: {
GET_USER_PROFILE_BY_ID: async (context, payload) => {
return {
driving: {
vehicles: ['car']
}
};
},
},
});
应用程序.vue
<ValidationObserver ref="form" v-slot="{ passes, invalid }">
<form @submit.prevent="passes(submitForm)">
<label for="vehicle">Vehicles</label>
<Checkbox v-model="car" label="car" name="vehicle" identifier="car"/>
<Checkbox v-model="bus" label="bus" name="vehicle" identifier="bus"/>
<Checkbox v-model="van" label="van" name="vehicle" identifier="van"/>
<Checkbox v-model="truck" label="truck" name="vehicle" identifier="truck"/>
<div>
<button type="button" :disabled="invalid" @clicked="submitForm()">Submit</button>
</div>
</form>
</ValidationObserver>
<script>
export default {
name: "App",
components: {
Checkbox,
ValidationObserver
},
data: () => ({
car: null,
bus: null,
van: null,
truck: null,
error: null,
success: null
}),
created() {
this.getProfile(1);
},
methods: {
async getProfile(id) {
try {
const response = await this.$store.dispatch("GET_USER_PROFILE_BY_ID", {
id
});
console.log(response);
this.car = response.driving.vehicles.includes("car");
this.bus = response.driving.vehicles.includes("bus");
this.van = response.driving.vehicles.includes("van");
this.truck = response.driving.vehicles.includes("truck");
console.log(this.car);
} catch (err) {
console.log(err);
}
}
}
}
</script>
解决方案
如果我正确理解了您的问题,这个沙箱应该会有所帮助。
我所做更改的摘要:
摆脱了:value="identifier"
与 v-model 冲突的 Checkbox.vue(因为 v-model 只是一个 :value 和 @input)。
:checked = value
用and替换了 innerValue 数据和它的观察者@input="$emit('input', $event)"
。由于我摆脱了 innerValue 并且您不应该更新道具,它只是发出而不是获取值。
摆脱了“已检查”的道具,因为它没有被使用
我建议将复选框值保留为 true 或 false 而不是 null,因为这是它们唯一可以拥有的两个值。
编辑:
我已经从您更新的沙箱中分叉了代码,该沙箱可在此处获得。
将 innerValue 替换为 value 因为 innerValue 不存在 - 修复了所有控制台错误。
将发射值从 $event 更改为 $event.target.checked - 所以它发射一个真或假而不是整个事件
我不得不重新添加:value="value"
复选框,因为显然 VeeValidate 需要一个 v-model 或一个 :value 作为提示,文档在这里找到。
推荐阅读
- javascript - TypeError: Object(...) is not a function - Redux - React-Router
- spring - 在 YAML 文件中调用多个 ConditionalOnProperties
- python - 当我在 python 中使用 f 字符串时得到不同的输出
- php - 404 仅适用于在 url 栏中显示扩展
- c# - 如何有效地在 C# 中搜索特定 DWORD 值的第一个实例的原始字节数据?
- python - Heroku - 在 Procfile 的文件夹中运行 python
- xamarin.android - 如何在 Xamarin 中获取媒体文件的专辑封面?
- .net - GRPC - 为什么`CallInvoker`需要强加`TRequest:class`和`TResponse:class`?
- python - 如何从“on_failure_callback”函数推送 xcom 变量并在另一个任务中提取相同的变量
- angular - 如何上传 CSV 并使用 UTF-8 编码显示?