Jun 11, 2020
0
Level 1
Extending SelectField.vue
How can I extend SelectField.vue to be poopulated with ajax. My FormField.vue looks like this:
<script>
import { SelectField } from "laravel-nova";
export default {
mixins: [SelectField],
props: ["resourceName", "resourceId", "field"],
data() {
return {
parentValue: null,
loaded: false,
options: []
};
},
mounted() {
this.watchedComponents.forEach(component => {
let attribute = "value";
if (component.field.component === "belongs-to-field") {
attribute = "selectedResource";
}
component.$watch(
attribute,
value => {
this.parentValue =
value && attribute == "selectedResource" ? value.value : value;
this.updateOptions();
},
{ immediate: true }
);
});
},
computed: {
watchedComponents() {
return this.$parent.$children.filter(component => {
return this.isWatchingComponent(component);
});
},
disabled() {
return this.options.length == 0;
},
},
methods: {
setInitialValue() {
this.value = "";
},
updateOptions() {
this.value = "";
this.loaded = false;
this.options = [];
if (this.parentValue != null && this.parentValue != "") {
Nova.request()
.get(`/nova-components/nova-child-select/options/${this.resourceName}`, {
params: {
attribute: this.field.attribute,
parent: this.parentValue
}
})
.then(response => {
this.loaded = true;
this.options = response.data;
let optionValueExists = false;
this.options.forEach(option => {
if (option.value == this.field.value) {
optionValueExists = true;
this.value = option.value;
}
});
});
}
},
isWatchingComponent(component) {
return (
component.field !== undefined &&
component.field.attribute == this.field.parentAttribute
);
}
}
};
</script>
but I get some meaningless JS error (t is undefined) while the page loads
Please or to participate in this conversation.