时间戳

首页 > 解决方案 > Vue js：自定义输入清除值

javascript - Vue js：自定义输入清除值

问题描述

我创建了一个自定义输入

<template>
    <div class="content">
        <p>
            <slot></slot>
        </p>
        <input v-model="content" class="textbox" :type="type" @input="handleInput">
    </div>
</template>

<script>
export default {
  name: 'vTextbox',
  props:{
      type: String,
  }, 
  data: function(){
      return {
          content: ""
      }
  },
  methods:{
        handleInput(){
          this.$emit('input', this.content)
      }
  }
}
</script>

父组件调用自定义输入组件来抓取其内容如：

<vTextbox v-model="email" type="email">Email</vTextbox>

export default {
  ...
  data: function(){
      return{
          email: "",
      }
  },
  methods:{
    Clear: function(){
        this.email = ""
    }
  }
}

我想在调用 Clear 函数时清除自定义输入组件的值/内容。我尝试设置 this.email="" 但它不起作用。

标签： javascriptvue.js

解决方案

问题是您没有收到自定义输入中的值。当您v-model在父组件中时，为了使v-model组件发挥作用，该组件需要实现valueprop 并监视change.

这可能看起来像

<template>
    <div class="content">
        <p>
            <slot></slot>
        </p>
        <input v-model="content" class="textbox" :type="type" @input="handleInput">
    </div>
</template>

<script>
export default {
  name: 'vTextbox',
  props:{
      value: String, // added value prop
      type: String,
  }, 
  data: function(){
      return {
          content: ""
      }
  },
  watch:{
    value(val) {
      this.content = val; // added watch to override internal value, this will allow clear to work
    }
  },
  methods:{
        handleInput(){
          this.$emit('input', this.content)
      }
  }
}
</script>

推荐阅读