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

Question

大家好，我想在 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;
}

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

Answer 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