My v-if condition doesn't seem to be working?!

#1

I am unable to get into my ELSE please help

<div v-if="window.width <= 575 && !isFeaturedTask" class="body d-flex flex-column">
                <p>Window: {{ window.width }}</p>
                <p>Featured task {{isFeaturedTask}}</p>
      </div>
      <div v-else class="body d-flex flex-column">
        xx
      </div>
#2

I have also tried the following:

<h1 v-if="window.width <= 575">Vue is awesome!</h1>
      <h1 v-else>Oh no 😢</h1>

unable to get into the ELSE

#3

Assign window.width to a property in your data return object, and use that property in your if statement.

When stuck like this, I render the value to the screen to make sure the value is what I think it should be. So I would type {{ window.width}} somewhere visible, and see if it is less than 575

Also I always have the developer tools open. Currently you should see an error saying that window is not defined on the instance.

1 Like
#4

it was inside another if statement

#5

请让 window.width 替换成 700 或者 别的数字。

判断 是否 进入 v-else 方法。

(需要确保 window.width 是一个合规并可控的返回值)

谢谢。

#6

Hi Jarv, are you getting any errors in the console?

#7

I guess this might be helpful https://stackoverflow.com/a/47219938 :slight_smile:

#8

Because of “window” is not defined in Vue instance. Vue only supports render a variable that defined in Vue instance. You need to define “window” in data first then “window” will be a reactive data that can use in your template.

If you see the debug console, it will warn you why this is a problem.

Screen Shot 2564-01-23 at 3.11.41 AM
Screen Shot 2564-01-23 at 3.11.41 AM1108×137 13.4 KB

Read more why this is a problem here

#9

Your comment was the answer to my issue: a v-if' on a div was not working because the conditional value was the value of an inherited property. I added a data-property, and set its value the same as the inherited property by ‘watching’ the latter (important: immediate: true in Vue 2). Thanks a lot.