условный рендеринг с использованием vue.js

Question

Я пытаюсь изменить тип ввода поля электронной почты в зависимости от того, находится ли пользователь на рабочем столе или на мобильном устройстве.

Я добавил метод, который определяет, находится ли пользователь на мобильном устройстве.или нет

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

Я пытался внедрить его в html-файл, как показано ниже:

<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>

, но все, что это делает, это делает поле электронной почты исчезающим.

Чтоправильный способ реализовать эту функцию в Vue.js?

Answer 1

Вы определили isMobile как свойство получателя.Это не обязательно в Vue, и обычно вы вместо этого делаете это вычисляемое свойство («вычисляемое свойство» зависит от Vue, см. docs ).

Также вы бы не сталиt вызов это как метод, потому что это не метод, это свойство.

<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)
  }
}

Технически это не должно быть вычисляемое свойство, так как оно независит от любых данных компонента, и его значение никогда не изменится, поэтому вы можете вместо этого определить его как обычное свойство данных:

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