Custom component, fill a text input based on selection in drop-down list

Question

I've created a custom component and this custom component is used in a form. The custom component contains a drop-down list. The drop-down list is filled with information from a database. In the custom component there is an additional text input. What I would like is to fill the text input field based on the selection from the drop-down list, but I can not figure out how to do it.

I managed that I can type something in the text input field and I can use it in the form.
I also managed to get the text input field filled based on what I select in the drop-down list, but this is then not available in the form.

My component, here I can type something in the text input field and use it then in the form:

<script setup>
import { computed, ref } from "vue";
import BreezeLabel from "@/Components/Label.vue";
import BreezeInput from "@/Components/Input.vue";
import BreezeButton from "@/Components/Button.vue";

let props = defineProps({
  preset_params: Object,
  parametersPreset: String,
  parameterName: String,
});

const emit = defineEmits(["update:parametersPreset", "update:parameterName"]);

const updateParametersPreset = (event) => {
  emit("update:parametersPreset", event.target.value);
};

const updateParameterName = (event) => {
  emit("update:parameterName", event.target.value);
};

// filter the parameter based on the drop-down selection
const parameters_selected = computed(() => {
  let filtered_params = props.preset_params;

  filtered_params = filtered_params.filter((parameter) => {
    return parameter.id == props.parametersPreset;
  });

  // filtered_params is an array of one
  return filtered_params;
});

</script>

<template>
  <BreezeLabel for="preset_parameters">Select a predefined parameter set</BreezeLabel>
  <select
    name="preset_parameters"
    :value="parametersPreset"
    @input="updateParametersPreset"
  >
    <option v-for="preset_param in preset_params" :value="preset_param.id">
      {{ preset_param.parameter_name }}
    </option>
  </select>
  <div v-if="this.parametersPreset !== null" class="mt-6">
    <!-- Show some extra info -->
    {{ parameters_selected[0].comments }}
    <div class="mt-4">
      <BreezeLabel>Parameter name :</BreezeLabel>
      <BreezeInput
        type="text"
        placeholder="e.g. my parameter"
        :value="parameterName"
        @input="updateParameterName"
      />
    </div>
  </div>
</template>

Any suggestion / idea's?

I'am using Laravel 9, Inertiajs, and Vue3

Cheers, Rico

ricoderks · Accepted Answer · 2022-06-01 10:47:14Z

After some struggling I came up with a solution. I used a watcher on the select. I don't know if this is an elegant solution, but for now it is ok.

<script setup>
import { computed, ref, watch } from "vue";
import BreezeLabel from "@/Components/Label.vue";
import BreezeInput from "@/Components/Input.vue";
import BreezeButton from "@/Components/Button.vue";

let props = defineProps({
  errors: Object,
  form_fields: Object,
  preset_params: Object,
  parametersPreset: String,
  parameterName: String,
});

// initialize the formStep
const formStep = ref(1);

// emit everyting
const emit = defineEmits([
  "update:parametersPreset",
  "update:parameterName",
]);

// selected an parameter set
const updateParametersPreset = (event) => {
  emit("update:parametersPreset", event.target.value);
};

const updateParameterName = (event) => {
  emit("update:parameterName", event.target.value);
};

const parameters_selected = computed(() => {
  let filtered_params = props.preset_params;

  filtered_params = filtered_params.filter((parameter) => {
    return parameter.id == props.parametersPreset;
  });

  // filtered_params is an array of one
  return filtered_params;
});

// next step
function nextStep() {
  // increase the formStep value
  formStep.value++;
}

// previous step
function prevStep() {
  // decrease the formStep value
  formStep.value--;
}

// when the selection in the drop-down list changes, change all the input fields
watch(parameters_selected, (newParams) => {
  emit("update:parameterName", newParams[0].parameter_name);
});
</script>

<template>
  <h2 class="font-bold">SELECT PARAMETERS</h2>
    <div
      v-if="errors.parameter_set_selected"
      v-text="errors.parameter_set_selected"
      class="text-red-500"
    ></div>
    <BreezeLabel for="preset_parameters">Select a predefined parameter set</BreezeLabel>
    <select
      name="preset_parameters"
      :value="parametersPreset"
      @input="updateParametersPreset"
    >
      <option v-for="preset_param in preset_params" :value="preset_param.id">
        {{ preset_param.parameter_name }}
      </option>
    </select>
    <div v-if="this.parametersPreset !== null" class="mt-6">
      <!-- Show some extra info -->
      {{ parameters_selected[0].comments }}
       <div class="mt-4">
        <BreezeLabel>Parameter name :</BreezeLabel>
        <BreezeInput
          type="text"
          placeholder="e.g. my parameter set name"
          :value="parameterName"
          @input="updateParameterName"
        />
      </div>
    </div>
 </template>

Cheers

Collectives™ on Stack Overflow

Custom component, fill a text input based on selection in drop-down list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related