v-if doesn't work when I change to the composition API

user_2050950 0
Viewed 79

I'm new to VueJS and I had some problems when I tried to change my code from vuejs 2 to vuejs3 with composition API. When I tried to change it to the code below, the v-if statement doesn't work when I clicked the color button to change the active button.

enter image description here

<template>
  <div class="relative mt-2 mx-2 text-left">
    <div class="w-7/12 md:flex md:flex-wrap" id="color-picker">
      <button
        v-for="color in colors"
        @click="updateActiveColor(color.value)"
        class="w-8 h-8 mr-2 rounded-full p-2 mt-2"
        :key="color.value"
        type="button"
        :data-testid="'button-' + color.value"
        :style="{ backgroundColor: color.color }"
      >
        <div v-if="selectColor.value === color.value" class="justify-center w-4 p-0 m-auto text-white">
          <CheckIcon />
        </div>
      </button>
    </div>
  </div>
</template>

<script lang="ts">
  export default defineComponent({
    props: {
      colors: {
        type: Object as() => Array < BaseColorPickerItem > ,
        required: true,
      },
      name: {
        type: String,
        required: true,
      },
      selectedColor: {
        type: Object as() => Prop < BaseColorPickerItem > ,
        require: false,
      },
    },
    setup(props, context) {
      let selectColor = ref(props.colors[0]);

      const updateActiveColor = (color: any) => {
        selectColor.value = color;
        console.dir(selectColor);
        context.emit('handleSelectColor', selectColor);
      };

      return {
        selectColor,
        updateActiveColor,
      };
    },
  });
</script>

vuejs3 vue.js javascript
1 Answers

You can pass the whole color object from template:

...
@click="updateActiveColor(color)"
...

and update it:

...
const updateActiveColor = (color: any) => {
    selectColor.value = color;
    ...

Please take a look at snippet below:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const colors = ref([{value: 1, color: 'red'}, {value: 2, color: 'blue'}, {value: 3, color: 'orange'}, {value: 4, color: 'green'}, {value: 5, color: 'yellow'}])
    const name = ref('aaa')
    const selectedColor = ref(null)
    const setColor = (color) => {
      selectedColor.value = color
    }
    return { selectedColor, colors, name, setColor }
  }
})
app.component('child', {
  template: `
    <div class="relative mt-2 mx-2 text-left">
    <div class="w-7/12 md:flex md:flex-wrap" id="color-picker">
      <button
        v-for="color in colors"
        @click="updateActiveColor(color)"
        class="w-8 h-8 mr-2 rounded-full p-2 mt-2"
        :key="color.value"
        type="button"
        :data-testid="'button-' + color.value"
        :style="{ backgroundColor: color.color }"
      >
        <div v-if="selectColor.value === color.value" class="justify-center w-4 p-0 m-auto text-white">
          &#10004;
        </div>
      </button>
    </div>
  </div>
  `,
  props: {
      colors: {
        type: Object ,
        required: true,
      },
      name: {
        type: String,
        required: true,
      },
      selectedColor: {
        type: Object  ,
        require: false,
      },
    },
    setup(props, context) {
      let selectColor = ref(props.colors[0]);

      const updateActiveColor = (color) => {
        selectColor.value = color;
        console.log(selectColor.value);
        context.emit('handleSelectColor', selectColor);
      };

      return {
        selectColor,
        updateActiveColor,
      };
    },
})
app.mount('#demo')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <child :name="name" :selectedColor="selectedColor" :colors="colors" @handle-select-color="setColor"></child>
  {{selectedColor}}
</div>

user_119891890
Related