VueJs에서 다른 옵션을 선택하여 다른 입력 블록을 여는 방법

안녕 장인,

오늘 블로그에서는 라디오, 선택, 체크박스와 같은 다양한 입력 유형에서 다른 옵션을 선택하여 다른 옵션 블록을 여는 방법을 보여드리겠습니다.

이것은 주어진 옵션에 나열된 옵션이 없고 귀하가 그 안에 우리 자신의 답변/옵션을 넣기를 원할 때 유용합니다.

이제 코드를 시작하겠습니다.

먼저 ExampleComponent.vue라는 구성 요소를 만들고 아래 코드를 추가해야 합니다.

<template>
  <div class="bg-white p-7 shadow h-screen mx-auto">
    <h2 class="text-center my-2 p-3 border-b">Example</h2>
    <div class="w-full border shadow">
      <select
        v-model="form.data"
        class="border border-indigo-300 rounded-lg shadow-lg px-3 py-2 w-1/4"
        @change="onSelectChange(form.data)"
      >
        <option :value="null" selected>Select Option</option>
        <option
          v-for="option in options"
          :key="option.id"
          :value="getOptionValue(option)"
        >
          {{ getOptionDisplayName(option) }}
        </option>
      </select>
      <input
        id="otherFiled"
        v-model="form.others"
        type="text"
        class="border px-4 py-2 my-4 border border-indigo-300 rounded-lg shadow-lg w-1/4"
        placeholder="Please specify your option"
        style="display: none"
      />
      {{ form.data }} - {{ form.others }}
      <div class="border-t mt-4 py-4">
        <form @submit.prevent="saveCheckboxValues">
          <input v-model="checkedFruits.option" type="checkbox" value="apple" />
          <label>apple</label>
          <input
            v-model="checkedFruits.option"
            type="checkbox"
            value="orange"
          />
          <label>orange</label>
          <input v-model="checkedFruits.option" type="checkbox" value="grape" />
          <label>grape</label>
          <input
            v-model="checkedFruits.other"
            type="checkbox"
            value="other"
            @change="getCheckedValue(checkedFruits.other)"
          />
          <!-- @change="getCheckedValue($event)" -->
          <label>{{ getRadioOtherOption("other") }}</label>
          <input
            id="otherCheckedOption"
            v-model="checkedFruits.other"
            type="text"
            class="border px-4 py-2 my-4 border border-indigo-300 rounded-lg shadow-lg w-1/4"
            placeholder="Please specify your option"
            style="display: none"
          />
          <button
            type="submit"
            class="border shadow border-indigo-300 p-2 ml-6 rounded-lg"
          >
            Save
          </button>
        </form>
      </div>
      <p>{{ checkedFruits }}</p>

      <div class="border-t mt-4 py-4">
        <form @submit.prevent="saveRadioValue">
          <input v-model="selectedColors.value" type="radio" value="yellow" />
          <label>yellow</label>
          <input v-model="selectedColors.value" type="radio" value="orange" />
          <label>orange</label>
          <input v-model="selectedColors.value" type="radio" value="pink" />
          <label>pink</label>
          <input
            v-model="selectedColors.value"
            type="radio"
            value="other"
            @change="getRadioOptionValue(selectedColors.value)"
          />
          <label>{{ getRadioOtherOption("other") }}</label>
          <input
            id="otherOption"
            v-model="selectedColors.value"
            type="text"
            class="border px-4 py-2 my-4 border border-indigo-300 rounded-lg shadow-lg w-1/4"
            placeholder="Please specify your option"
            style="display: none"
          />
          <button
            type="submit"
            class="border shadow border-indigo-300 p-2 ml-6 rounded-lg"
          >
            Save
          </button>
        </form>
      </div>
      <p>{{ selectedColors }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: ["yes", "no", "both", "other | Other (please specify)"],
      form: {
        data: [],
        others: [],
      },
      checkedFruits: {
        option: [],
        other: "",
      },
      selectedColors: {
        value: "",
        // other: '',
      },
    };
  },
  methods: {
    // this fn will only change the display name if it has other field
    getOptionDisplayName(option) {
      return option.replace("other | ", "");
    },

    // checks if value starts other | option so we can replace it with other so that we can use it for other answers by users
    getOptionValue(option) {
      if (option.startsWith("other | ")) {
        return "other";
      }
      return option;
    },

    // if selected option has other option selected then it will display other box and its value will be stored in other array
    onSelectChange(data) {
      if (data === "other") {
        document.getElementById("otherFiled").style.display = "block";
      } else {
        document.getElementById("otherFiled").style.display = "none";
      }
    },
    // ex radio other option
    getRadioOtherOption(option) {
      if (option === "other") {
        return "Other";
      } else {
        return option;
      }
    },

    getRadioOptionValue(option) {
      if (option === "other") {
        document.getElementById("otherOption").style.display = "block";
      } else {
        document.getElementById("otherOption").style.display = "none";
      }
    },

    getCheckedValue(option) {
      console.log(option);
      if (option === true) {
        document.getElementById("otherCheckedOption").style.display = "block";
      } else {
        document.getElementById("otherCheckedOption").style.display = "none";
      }
    },
    saveRadioValue() {
      this.$inertia.post(this.route("ex.store"), this.selectedColors);
    },
    saveCheckboxValues() {
      this.$inertia.post(
        this.route("example.storeCheckbox"),
        this.checkedFruits
      );
    },
  },
};
</script>

이제 이 구성 요소를 아래와 같이 App.vue에 추가합니다.

<template>
  <div id="app">
    <ExampleComponent />
  </div>
</template>

<script>
import ExampleComponent from "./components/ExampleComponent";

export default {
  name: "App",
  components: {
    ExampleComponent,
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

주어진 코드 블록에서 기능을 확인할 수 있습니다.



즐거운 독서.. ❤️ 🦄