为啥我在 Vue 中的移动标签效果不起作用？

Posted 2023-02-22

【中文标题】为啥我在 Vue 中的移动标签效果不起作用？

【英文标题】：Why is my moving label effect in Vue not working?为什么我在 Vue 中的移动标签效果不起作用？

【发布时间】：2020-08-25 08:42:55

【问题描述】：

大家好，我想在 vue 中重现这样的效果：

正如您所见，当用户开始在输入框中输入时，标签会移动并显示出来。

但是我很难访问输入框中的值以检查它们是否为空。

这是我的 vue 模板：

<template>
  <div class="desktop-landing-search">
    <!---------------------------------------JOB SEARCH WRAPPER--------------------------------------->
    <div class="desktop-landing-search__search-wrapper">
      <div class="desktop-landing-search__input-box">
        <label for="inputType" ref="typeLabel">Graduate or Internship</label>
        <input
          type="text"
          class="desktop-landing-search__input-box__input-search"
          id="inputType"
          placeholder="Graduate or Internship"
          ref="inputJobType"
          v-on:input="showLabel('type')"
        />
      </div>
      <div class="desktop-landing-search__input-box">
        <label for="inputIndustry" ref="industryLabel">Industry</label>
        <input
          type="text"
          class="desktop-landing-search__input-box__input-search"
          id="inputIndustry"
          placeholder="Industry"
          ref="inputIndustry"
        />
      </div>
      <div class="desktop-landing-search__input-box">
        <label for="inputLocation" ref="locationLabel">Location</label>
        <input
          type="text"
          class="desktop-landing-search__input-box__input-search"
          id="inputLocation"
          placeholder="Location"
          ref="inputLocation"
        />
      </div>
      <div class="desktop-landing-search__input-box">
        <button class="desktop-landing-search__btn-search">Search</button>
      </div>
    </div>
</template>

这是我用来显示标签的方法：

<script>
export default 
  name: "DesktopLandingSearch",
  methods: 
    showLabel: function(input) 
      if (this.input === "type" && this.refs.inputJobType.value != "") 
        this.refs.typeLabel.classList.toggle("show-label");
        window.alert("testing job type");
      
      if (this.input === "industry" && this.refs.inputIndustry.value != "") 
        this.refs.industryLabel.classList.toggle("show-label");
        window.alert("test job industry");
      
      if (this.input === "location" && this.refs.inputLocation.value != "") 
        this.refs.locationLabel.classList.toggle("show-label");
        window.alert("test job location");
      
    
  
;
</script>

这是我要切换的类：

.show-label 
  top: -130%;
  opacity: 1;

谁能告诉我我做错了什么？

【参考方案1】：

你看过v-model吗？

如果你把v-model="inputIndustry" 放在那个输入上，那么在你的方法上面放：

data() 
  return 
    inputIndustry: ""
  

在输入中键入的任何内容都会插入或“绑定”到inputIndustry 数据属性。

所以，在showLabel 中，您可以检查是否为this.inputIndustry !== ""，然后做任何您喜欢的事情。

如果删除对input 参数的所有引用并将它们替换为对绑定数据属性的引用，则可以直接访问输入值。您还需要在每个输入上加上 @keydown="showLabel"，以便触发该方法。

如果您需要，文档是很好的帮助：https://vuejs.org/v2/guide/forms.html

如果您想切换类，请查看与 v-bind 的类绑定：https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax

【讨论】：

玩了一下，我认为e.target 是一个更好的解决方案。这是一个粗略的演示：jsfiddle.net/Daniel_Knights/4ux0tbd7/32

非常感谢您的帮助。不过，只有一个问题，我在调用 showLabel 时传入了一个参数，例如 @keydown="showLabel('location')"。但是当我调试时它说位置参数未定义，是我使用了错误的括号还是什么？

没关系，我已经修好了。访问方法中的参数时，我正在编写“this.input”，但我应该只使用“input”。

你使用的是e.target的方式吗？如果是这样，您需要说@keydown="showLabel($event, 'location'" 并在showLabel(e, input) 中添加“位置”参数

哦是的，那也是