Is it possible that the v-if directive is not functioning properly with the script setup in vue2.7? Have the syntax requirements changed in vue2

Question

Is it possible that the v-if directive is not functioning properly with the script setup in vue2.7? Have the syntax requirements changed in vue2

<template>
  <div>
    <button @click="handleClick">toggle</button>
    <span v-if="isToggled()">
      hidden message
    </span>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const sets = ref<Set<number>>(new Set())

const isToggled = computed(() => () => sets.value.has(1))

function handleClick() {
  sets.value.add(1)
}
</script>

anticipated outcome: click the button and display the hidden message current result: nothing occurred...

Vue version: 2.7.7 vite: 3.0.2 typescript: 4.7.4

Created a basic Vue project using npm init vue@2, then inserted the above code into App.vue and executed with npm run dev

vue.js vuejs2 vuejs3 vue-composition-api vue-script-setup

Answer 1

Answer №1

Alright... I recently discovered that vue2.7.x does not currently utilize Proxy, resulting in Set not being reactive.

Here's the workaround: simply introduce a reactive data as a condition...

<template>
  <div>
    <button @click="handleClick">toggle</button>
    <span v-if="isToggled()">
      hidden message
    </span>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const sets = ref<Set<number>>(new Set())
const fake = ref<number>(1)


const isToggled = computed(() => () => fake.value && sets.value.has(1))
// same as function isToggled() { ... }

function handleClick() {
  fake.value++
  sets.value.add(1)
}
</script>

Answer 2

Alright... I recently discovered that vue2.7.x does not currently utilize Proxy, resulting in Set not being reactive.

Here's the workaround: simply introduce a reactive data as a condition...

<template>
  <div>
    <button @click="handleClick">toggle</button>
    <span v-if="isToggled()">
      hidden message
    </span>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const sets = ref<Set<number>>(new Set())
const fake = ref<number>(1)


const isToggled = computed(() => () => fake.value && sets.value.has(1))
// same as function isToggled() { ... }

function handleClick() {
  fake.value++
  sets.value.add(1)
}
</script>

Answer 3

Answer №2

When working in Vue 2.7, you may encounter reactivity issues with Set. Here is a workaround to try:

<template>
  <div>
    <button @click="handleClick">toggle</button>
    <span v-if="isToggled">
      hidden message
    </span>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const sets = ref<Set<number>>(new Set())

const isToggled = ref(false)

function handleClick() {
  sets.value.add(1)
  isToggled.value=sets.value.has(1)
}
</script>

Note for Vue 3 users:

In Vue 3, computed properties are utilized as regular variables without parenthesis ():

    <span v-if="isToggled">
      hidden message
    </span>

Simply remove the extra ()=> in the computed callback like so:

const isToggled = computed(() => sets.value.has(1))

If your computed property requires an argument when used, define it as a function:

    <span v-if="isToggled(1)">
      hidden message
    </span>

const isToggled = computed(() => (n) => sets.value.has(n))

Answer 4

When working in Vue 2.7, you may encounter reactivity issues with Set. Here is a workaround to try:

<template>
  <div>
    <button @click="handleClick">toggle</button>
    <span v-if="isToggled">
      hidden message
    </span>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const sets = ref<Set<number>>(new Set())

const isToggled = ref(false)

function handleClick() {
  sets.value.add(1)
  isToggled.value=sets.value.has(1)
}
</script>

Note for Vue 3 users:

In Vue 3, computed properties are utilized as regular variables without parenthesis ():

    <span v-if="isToggled">
      hidden message
    </span>

Simply remove the extra ()=> in the computed callback like so:

const isToggled = computed(() => sets.value.has(1))

If your computed property requires an argument when used, define it as a function:

    <span v-if="isToggled(1)">
      hidden message
    </span>

const isToggled = computed(() => (n) => sets.value.has(n))

Is it possible that the v-if directive is not functioning properly with the script setup in vue2.7? Have the syntax requirements changed in vue2

Answer №1

Answer №2

Similar questions

Various filters have been utilized on an array of objects

Creating a dropdown menu in Vue.js with a nested array

The Vue.js error message "Unable to access property 'array_name' as it is undefined" indicates an issue with

Encountering difficulty when attempting to load a Vue component within a Blade file in Laravel 8

Adding Typescript to a Nativescript-Vue project: A step-by-step guide

Nuxt3 encountered a request error for an unhandled 500 fetch failure at the http://localhost:3000/__nuxt_vite_node__/manifest url

Update tailwindcss color dynamically according to user input within Vue3/Nuxt3

The 'name' property of Axios and Vuex is not defined and cannot be read

What is the process for importing a component along with all its dependencies?

What is the process for converting a UTC datetime string into the local timezone of users?

Using the <pre> tag with Vue.js in v-html allows for displaying pre

Vuetify Container with a set maximum width that remains fixed

Tips for incorporating a conditional statement within a vue.js :attr

Trouble retrieving data using component props

Identifying separator when v-carousel is selected

Guide on structuring Vue so that all pages have a consistent header and navigation, while still allowing for standalone pages like a registration form

Is there a way for me to showcase the latitude and longitude retrieved from JSON data on a Google Map using modals for each search result in Vue.js?

Navigate back to the previous route within the Vue router hierarchy

Achieving JSX rendering in Vue.js with TypeScript starting from a basic CLI setup along with the JSX package integration

Tips for showcasing the content of a variable