Weex 给<text>绑定点击事件不起作用，怎么办？

Question

当给<text>绑定了点击事件，点击不起作用，请问大神这是怎么回事？

---

如果将<div class="conceal>中的@click="hidden"给其子元素<text>的时候

，下面的<text>点击事件就能生效，请问这是怎么回事呢?

---

<template>
  <div>
    <div class="header">
      <div class="conceal" v-if="flag" @click="hidden">
        <text class="text">搜索您需要的内容</text>
      </div>
      <div class="input" v-if="in_flag">
        <input class="int" type="text" placeholder="搜索您需要的内容">
        <text @click="close" class="in_text">取消</text> // 这里给<text>绑定了@click事件 可是不起作用
      </div>
    </div>
  </div>
</template>

<style>
  .header{
    padding-top: 15px;
    padding-left: 40px;
    height: 100px;
    background-color: rgb(230,230,230);
  }
  .conceal{
    background-color:#fff;
    width: 650px;
    height: 70px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
  }
  .text{
    color: rgb(120,120,120);
  }
  
  .input{
    width: 650px;
    flex-direction: row;
  }
  .int{
    padding-left: 5px;
    width: 550px;
    height: 70px;
    margin-right: 20px;
  }
  .in_text{
    margin-top: 10px;
  }
</style>

<script>
  export default {
    data(){
      return {
        flag: true,
        in_flag: false
      }
    },
    methods: {
      hidden:function(){
        this.flag=false;
        this.in_flag=true;
        
      },
      close:function(){
        this.flag=true;
        this.in_flag=false;
      }
    }
  }
</script>

Answer 1

看了一下，事件生效了，是你的 dom 没有更新。

Answer 2

点击事件应该是生效的，但是v-if的加载是惰性的，当条件首次为真时才开始局部渲染并且会被编译缓存，像你这种需要频繁切换的情况，建议用v-show，把你的v-if替换成v-show应该就可以了。

Answer 3

用this.$forceUpdate()强制刷新试试