vue.js 如何以编程方式触发< input>更改

ztyzrc3y 于 2023-11-21 发布在 Vue.js

关注(0)|答案(2)|浏览(164)

我将构建一个自定义的虚拟键盘，这是我遇到的第一个问题。我有一个input元素，它的值是从外部更改的，在我的例子中是通过按一个按钮。问题是似乎没有办法触发正常的'change'事件。
在input外部单击或按Enter都不会产生任何结果。
解决这个问题的正确方法可能是什么？

<template>
  <div class="app-input">
    <input @change="onChange" type="text" v-model="value" ref="input">
    <button @click="onClick">A</button>
  </div>
</template>

<script>
export default {
  name: "AppInput",
  data() {
    return {
      inputDiv: null,
      value: ""
    };
  },
  props: {
    msg: String
  },
  methods: {
    onClick() {
      this.value = this.value + "A";
      this.inputDiv.focus();
    },
    onChange() {
      alert("changed");
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.inputDiv = this.$refs.input;
    });
  }
};
</script>

字符串
整支笔都可以找到here。

vue.js

来源：https://stackoverflow.com/questions/59009178/how-to-trigger-change-on-input-changed-programmatically

2条答案

按热度按时间

guicsvcw1#

v-on:change只会在用户操作对输入元素进行直接更改时触发。
你正在寻找的是一个监视器为您的数据属性，每当您的value的变化，监视器将执行您想要的功能或任务。

watch: {
  value: function() {
    this.onChange();
  }
}

字符串
watch语法在提供的官方vuejs文档链接中详细说明。使用data属性作为键，并提供函数作为值。
查看代码片段：

export default {
  name: "AppInput",
  data() {
    return {
      inputDiv: null,
      value: ""
    };
  },
  props: {
    msg: String
  },
  methods: {
    onClick() {
      this.value = this.value + "A";
      this.inputDiv.focus();
    },
    onChange() {
      alert("changed");
    }
  },
  // this one:
  watch: {
    value: function() {
      this.onChange();
    }
  },
  // --- rest of your code;
  mounted() {
    this.$nextTick(() => {
      this.inputDiv = this.$refs.input;
    });
  }
};

型

赞(0）回复(0）举报 2023-11-21

rta7y2nd2#

当我构建任何新的vue应用程序时，我喜欢将这些事件用于搜索输入或其他不想在@change上触发任何函数的输入

<div class="class">
   <input v-model="searchText" @keyup.esc="clearAll()" @keyup.enter="getData()" autofocus type="text" placeholder="Start Typing ..."/>
   <button @click="getData()"><i class="fas fa-search fa-lg"></i></button>
</div>

字符串
在我看来，这将提供更好的用户体验。

赞(0）回复(0）举报 2023-11-21

我来回答

vue.js 如何以编程方式触发< input>更改

2条答案

相关问题

热门标签

最新问答