Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

isimelek's avatar

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

0 likes
0 replies

Please or to participate in this conversation.