问题描述
所以我有两个表格字段国家和地区。第一步,您要选择国家而不是地区。如果选择了国家,则将地区(选项)添加到下一个地区。
我使用axios添加的区域选项。
我遇到问题的情况:当用户选择国家/地区时,选择地区,然后返回更改国家/地区。
必须重置该区域。我尝试在Lifecycle Hooks mounted
和created
中做到这一点,但是veevalidate检测到未更改。因此,该值将被更改,因此为null,但未检测到vee validate。我已经通过在watch
内添加nextTick
(带有mounted
)解决了这个问题。
我对vue.js(javascript)经验很少。任何帮助表示赞赏。
这是我完整的 SelectBox.vue
<div>
<v-select
@input="setSelected"
:options="choices"
:filterable="filterable"
:value="value"
:placeholder="placeholder"
></v-select>
</div>
</template>
<script>
import vSelect from "vue-select";
import debounce from 'lodash/debounce';
import axios from 'axios';
//axios.defaults.headers.get["Vuejs"] = 1;
export default {
props: [
"options","filterable","value","url","name","placeholder"
],data: function () {
var choices = this.options;
if (this.name == "region") {
choices = this.$store.state["regionChoices"] || [];
if (this.value && !choices.includes(this.value)) {
this.toReset = true;
}
if ( Array.isArray(choices) && choices.length < 1) {
this.addError("region","Country is not selected or there are not available options for your selected country.");
}
}
return {
choices: choices
// refPrefix: this.name + "Ref"
}
},components:{
vSelect
},inject: ["addError"],methods: {
searchRegions: debounce((val,vm) => {
axios.get(vm.url + val)
.then(res => {
vm.$store.state["regionChoices"] = res.data.results;
});
},250),setSelected(val) {
this.$emit("input",val);
if (this.name == "country") {
const countryId = val ? val.value : "0";
this.searchRegions(countryId,this);
}
},},mounted() {
if (this.name == "region") {
this.$watch('value',function(value) {
if (this.toReset) {
this.$nextTick(function () {
this.setSelected("");
this.toReset = value ? true : false;
});
}
},{ immediate: true });
}
},}
</script>
解决方法
我的Vue模型是在父组件中定义的。因此,我的模型属性也必须从我的组件的父级更新,我已经将方法resetRegion
添加到了我的父级组件。而且我可以在provide
和inject
的子组件中使用它。
我的父组件代码段:
export default {
name: "form-template",components: {
FieldGroup,},provide() {
return {
addError: this.addError,resetRegion: this.resetRegion
}
},methods: {
...mapMutations({
updateField: "applicant/updateField"
}),addError(field,msg) {
this.errors.add({field: field,msg: msg});
},resetRegion() {
this.formData.region = "";
}
}
}
我的子组件代码段:
export default {
props: [
"options","value","multiple","name","placeholder","url"
],components:{
vSelect
},inject: ["addError","resetRegion"],computed: {
choices: function () {
let choices = this.options;
if (this.name == "region") {
choices = this.$store.state["regionChoices"];
}
return choices || []
}
},methods: {
searchRegions(val,vm) {
vm.$store.state["regionChoices"] = [];
axios.get(vm.url + "?pk=" + val)
.then(res => {
const choices = res.data.results || [];
vm.$store.state["regionChoices"] = choices;
if (Array.isArray(choices)) {
const curValue = vm.$store.state.lead.formData.region;
if (choices.length < 1 || (curValue && !choices.some(e => e.id === curValue))) {
this.resetRegion();
}
} else {
this.resetRegion();
}
});
},setSelected(val) {
this.$emit("input",val);
if (this.name == "country") {
this.searchRegions(val,this);
}
}
},mounted() {
if (this.name == "region") {
if(!Array.isArray(this.choices) || this.choices.length < 1) {
this.addError("region",window.HNJLib.localeTrans.regionErr);
}
}
},created() {
if (this.name == "country" && this.value && !this.$store.state.hasOwnProperty("regionChoices")) {
this.searchRegions(this.value,this);
}
}
}
所以我的问题解决了。