v-show not working when toggle bind value

[mu-yu]

v-show works fine with initialize value，but if I changed the value in the future, the element won't toggle visible status.

here is my example code:

<el-input v-show={this.tableFilterVisible} class="custom-th-filter"
              placeholder="输入以筛选"
              value={this.queryForm.appName}
              onInput={(appName: string) => {this.queryForm.appName = appName}}
              onChange={this.initQuery} >
</el-input>

[nickmessing]

V-show works fine when I try it, looks like your component (<el-input />) simply does not support that. Can you please provide a reproduction?

[mu-yu]

Thank you for you response. I have uploaded a project here to reproduce the issue here: https://github.com/mu-yu/questions/tree/master/vueTsxIssue

run npm run dev and click toggle button, and you will see the el-input element in column2 and column3 won't change.

[nickmessing]

@mu-yu, thank you, will check as soon as I have some time

[manast]

I am actually having the same or very similar problem. I have a v-show (although the same happens with v-if) binded to a value that changes later on from false to true, however it does not react after the change. I will try to create a minimal reproducible test case.

[mu-yu]

I think my problem is wrong this in class. I have noticed this(https://github.com/vuejs/vue-class-component#this-value-in-property) some days ago, which may be helpful to you.@manast

[hou-pu]

I have encountered this situation； Did you put the v-show in the root element of the component？

[oslotboom]

I also get this behavior. For me, it appears to be related to trying to pass in the argument to toggle it.

This does not work Toggle: function (target) { target = !target; }

This works Toggle: function () { this.showAllSocialNetworkData = !this.showAllSocialNetworkData; }

[kanyu]

<div id="app">
  <template v-show="show">
    <h1>template v-show: {{ show }}</h1>
    <p>What the head</p>
  </template>
  
  <template v-if="show">
    <h1>template v-if: {{ show }}</h1>
    <p>What the head</p>
  </template>
  
  <div v-show="show">
    <h1>div v-show: {{ show }}</h1>
    <p>What the head</p>
  </div>
  
  <div v-if="show">
    <h1>div v-if: {{ show }}</h1>
    <p>What the head</p>
  </div>
  
  <button @click="change()">click</button>
</div>

new Vue({
  el: '#app',
  data: {
    show: false
  },
  methods: {
    change() {
      this.show = !this.show
      console.log(this.show)
    }
  }
})

I have same behavior which v-show work with a div but not with a template https://codepen.io/kanyu/pen/QoRxLY?editors=1111

[simshaun]

@kanyu v-show does not work with <template>.

See docs: https://vuejs.org/v2/guide/conditional.html#v-show