conditional rendering using vue.js

Question

I am trying to change the input type of an email field based on whether the user is on a desktop or a mobile device.

I have added a method which detects whether the user is on a mobile device or not

get isMobile() {
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    return true;
  } else {
    return false;
  }
}

I tried to implement it in the html file like the following

<form-field :label="label">
  <span class="mandatory_field" v-if="required">*</span>
  <div v-if="!isMobile()">
   <desktop>
    <input v-bind:class="inputStyle"
      type="text"
      :id="id"
      :name="name"
      @input="$emit('input',$event.target.value)"
      :placeholder="placeholder"
      :value="value"
  />
    </desktop>
    </div>
    <div v-else>
      <mobile>
          <input v-bind:class="inputStyle"
          type="email"
          :id="id"
          :name="name"
          @input="$emit('input',$event.target.value)"
          :placeholder="placeholder"
          :value="value"
        />
      </mobile>
    </div>
  <p class="field_error">{{ error }}</p>
</form-field>

but all this does is make the email field disappear.

What is the correct way to implement this functionality in Vue.js?

tony19 · Accepted Answer · 2022-07-15 22:04:09Z

3

You've defined isMobile as a getter property. This isn't necessary in Vue, and typically you would make this a computed property instead (a "computed property" is Vue-specific, see the docs).

Also you wouldn't call it like a method because it isn't a method, it's a property.

<div v-if="isMobile">Mobile</div>
<div v-else>Desktop</div>

computed: {
  isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  }
}

Technically it needn't be a computed property since it doesn't depend on any of the component's data and its value will never change, so you can instead define it as a normal data property:

data() {
  return {
    isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  }
}

edited Jul 15, 2022 at 22:04

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 13, 2019 at 10:12

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

conditional rendering using vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related