请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

获取不到输入框的值 @input无法触发事件

<template>
  <div class="search-bar">
    <div class="search-bar-wrapper">
      <van-icon 
        class="search"
        name="search"
        size="16px"
        color="#858c96"
      ></van-icon>
      <input 
        class="search-bar-input"
        :focus="focus" 
        :disabled="disabled" 
        :maxlength="limit" 
        :placeholder="hotSearch.length === 0 ? '搜索' : hotSearch"
        v-model="searchWord"
        @input="onChange"
      />
      <van-icon 
        class="clear"
        name="clear"
        size="16px"
        color="#858c96"
        @click="onClearClick"
      ></van-icon>
      
    </div>
  </div>
</template>

<script>
export default {
  components: {

  },
  props: {
    focus: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: true
    },
    limit: {
      type: Number,
      default: 50
    },
    hotSearch: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      searchWord: ''
    }
  },
  watch: {

  },
  computed: {

  },
  methods: {
    onSearchBarClick() {
      this.$emit('onClick')
    },
    onClearClick() {
      console.log(111)
      console.log(this.searchWord)
      this.searchWord = ''
      this.$emit('onClear')
    },
    onChange(e) {
      console.log(222)
      console.log(e)
    }
  },
  created() {

  },
  mounted() {

  }
}
</script>
<style lang="scss" scoped>
.search-bar {
  padding: 15px 15.5px;
  .search-bar-wrapper {
    display: flex;
    align-items: center;
    height: 40px;
    box-sizing: border-box;
    background: #f5f7f9;
    border-radius: 20px;
    padding: 12px 17px;
    .search-bar-input {
      flex: 1;
      margin: 0 8px;
    }
    .search, .clear {
      display: flex;
      align-items: center;
      height: 100%;
    }
  }
}
</style>

图片描述
老师,你好, 这里用v-model打印获取不到searchWord的值,但是换成v-model.lazy是可以的;
还有一个问题是@input=“onChange” 这里触发不了onChange事件, 麻烦老师看下是哪里的问题

正在回答 回答被采纳积分+3

2回答

理智M 2019-11-26 15:04:02

不要选择 小程序的 2.8.3版本 这个版本有bug 

0 回复 有任何疑惑可以回复我~
提问者 MK_進 2019-11-21 15:31:49

在手机上预览了一下是没有问题的, 在微信开发者工具上有问题

0 回复 有任何疑惑可以回复我~
  • 解决了吗?我在开发者工具中onClearClick这个事件都触发不了
    回复 有任何疑惑可以回复我~ 2019-12-17 12:00:22
问题已解决,确定采纳
还有疑问,暂不采纳
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号