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

嘿，伙计们，我正试图在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;
}

---

有人能告诉我我做错了什么吗？

你调查过

v型车吗

如果将
v-model=“inputIndustry”
放在该输入上，则在方法上方放置：

data() {
  return {
    inputIndustry: ""
  }
}

输入中键入的任何内容都将插入或“绑定”到
inputIndustry
data属性

因此，在
showLabel
中，您可以检查
this.inputIndustry！==“”
然后做任何你喜欢的事

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

如果您需要，文档是一个很好的帮助：

如果您想切换类，也可以使用
v-bind
进行类绑定：
进行了一次尝试，我认为
e.target
是一个更好的解决方案。这里有一个粗略的演示：非常感谢您的帮助。不过，只有一个问题，我在调用showLabel时传入了一个参数，例如@keydown=“showLabel（'location'）”。但当我调试时，它说位置参数未定义，我是否使用了错误的括号或其他东西？不管怎样，我已经修复了它。当访问方法中的参数时，我正在编写'this.input'，但我应该只使用'input'。您使用的是
e.target
方式吗？如果是这样，您需要说
@keydown=“showLabel（$event，'location'”
，并在
showLabel（e，input）
中为'location'添加参数