Javascript 根据输入时的道具类型显示/隐藏html

我想根据道具类型在输入上显示和隐藏图标

如果类型为密码，则会显示图标，使密码可见/隐藏；如果类型不是密码，则应隐藏将v-show更改为false的图标

下面是带有v-show

showPwIcon

的HTML，以使图标可见

<input
  ref="textField"
  v-model="textField"
  :placeholder="placeholder"
  :type="type"
>
<span v-show="showPwIcon" @click="switchVisibility">
  <i :class="[pwIcon ? 'ri-eye-line' : 'ri-eye-off-line']"></i>
</span>

对于当前代码，我遇到了以下问题：

如果输入文本，则不会显示图标

<text-field-icon
  placeholder="Placeholder here"
  type="text"
/>

类型为password，但v-show不是true

<text-field-icon
  placeholder="Placeholder here"
  type="password"
/>

我正试图通过观察输入上的道具类型来获得这项工作，但我无法通过

this.$refs.textField.type

示例代码

---

有什么想法吗？

你不需要一个复杂的观察者。如果您考虑

UI=Function（State）

，那么您应该只依赖于使用

type

prop，而不是从实际输入元素读取type的值-

this.$refs.textField.type

。此外，请注意，

$refs

不是反应性的

简单的解决办法是

<input
  v-model="textField"
  :placeholder="placeholder"
  :type="(showPwIcon && !pwIcon) ? 'text' : type">

<span v-show="showPwIcon" @click="switchVisibility">
  <i :class="[pwIcon ? 'ri-eye-line' : 'ri-eye-off-line']"></i>
</span>

---

记住，事实的来源是组件实例，而不是DOM。阅读

$refs

就像你在创造第二个真理来源

$refs

是为不兼容Vue的库设计的，在这些库中，您需要与实际的DOM对话。很少有例子是图表库、视频播放器等。

我们不需要watcher或$refs来实现这一点

注意

$refs

不是反应性的

<input
  v-model="textField"
  :placeholder="placeholder"
  :type="inputType"
>
<span v-show="showPwIcon" @click="switchVisibility">
  <i :class="[pwIcon ? 'ri-eye-line' : 'ri-eye-off-line']"></i>
</span>

---

请为此创建一个用于显示正在发生的问题的。已使用代码示例更新

export default {

  // Props and data declaration...

  watch: {
    type: function (newVal) {
      if (newVal === 'password') {
        this.showPwIcon = true

        // Initially, set password visibility to false
        this.pwIcon = true
      } else {
        this.showPwIcon = false
      }
    }
  },

  methods: {
    switchVisibility() {

      // Toggle Visibility
      this.pwIcon = !this.pwIcon;

      this.$emit('input', {
        type: this.pwIcon ? 'text' : 'password'
      })
    }
  }
}

<input
  v-model="textField"
  :placeholder="placeholder"
  :type="inputType"
>
<span v-show="showPwIcon" @click="switchVisibility">
  <i :class="[pwIcon ? 'ri-eye-line' : 'ri-eye-off-line']"></i>
</span>