I have a working on a Responsive yes/no questionnaire where user can select either yes/no on each of the posed questions.

I want each questionCard component to have a radio-button group (yes/no). The radio-circles should be hidden and only label should be visible. Clicking on the label should select the appropiate option. ALL THIS WORKS

My issue comes in when I re-size the window! The layout changes appropietly but the radio selection is gone.

Any Ideas how I can keep the selection regardless the window size?

CodeSandbox

App.vue

<template>
  <parent-component />
</template>

<script>
import parentComponent from "./components/parentComponent.vue";
export default {
  name: "App",
  components: {
    parentComponent,
  },
};
</script>

<style>
</style>

Parent.vue

<template>
  <div>
    <question-card
      v-for="car in objectData.cars.data"
      :key="car.id"
      :carData="car"
    ></question-card>
  </div>
</template>

<script>
import questionCard from "./questionCard.vue";
export default {
  name: "App",
  components: {
    questionCard,
  },
  data() {
    return {
      objectData: {
        cars: {
          data: [
            {
              id: 1,
              name: "Do You Like Tesla?",
            },
            {
              id: 2,
              name: "Do You Like BMW?",
            },
            {
              id: 3,
              name: "Do You Like AUDI?",
            },
          ],
        },
      },
    };
  },
};
</script>

Questioncard.vue

<template>
  <br />
  <br />
  <div class="hidden sm:block">
    <h1>Lage Screen</h1>
    <h2 class="font-bold">{{ carData.name }}</h2>
    <div class="flex items-center justify-center">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id   'yes'"
      />
      <label
        :for="carData.id   'yes'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>Yes</span>
      </label>
    </div>
    <div class="flex items-center justify-center">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id   'no'"
      />
      <label
        :for="carData.id   'no'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>No</span>
      </label>
    </div>
  </div>
  <div class="sm:hidden">
    <h1>Small Screen</h1>
    <h2 class="font-bold">{{ carData.name }}</h2>
    <div class="flex items-center w-1/2 justify-center">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id   'yes'"
      />
      <label
        :for="carData.id   'yes'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>Yes</span>
      </label>
    </div>
    <div class="flex items-center w-1/2 justify-center">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id   'no'"
      />
      <label
        :for="carData.id   'no'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>No</span>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: ["carData"],
  data() {
    return {
      selected: null,
    };
  },
  methods: {
    onChange(event) {
      this.selected = event.target.value;
    },
  },
};
</script>

<style scoped>
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked   label {
  background-color: #78be20;
}
</style>

CodePudding user response：

I see you are using TailwindCSS. You can control the sizes with w-1/2 sm:w-full on the elements

You don't need different input for the different screen sizes. Like this

  <div class="">
    <h1>Any size Screen</h1>
    <h2 class="font-bold">{{ carData.name }}</h2>
    <div class="flex items-center justify-center w-1/2 sm:w-full">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id   'yes'"
      />
      <label
        :for="carData.id   'yes'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>Yes</span>
      </label>
    </div>
    <div class="flex items-center justify-center w-1/2 sm:w-full">
      <input
        @change="onChange($event)"
        type="radio"
        :name="carData.id"
        :id="carData.id   'no'"
      />
      <label
        :for="carData.id   'no'"
        class="border text-center border-yellow-500 rounded-2xl w-11/12 py-0.5 hover:bg-red-500 hover:text-white hover:border-green-300"
      >
        <span>No</span>
      </label>
    </div>
  </div>