v-if and v-else Causing the button value to be cleared #4530

Closed
workwsl opened this Issue Dec 21, 2016 · 1 comment

Projects

None yet

2 participants

@workwsl
workwsl commented Dec 21, 2016 edited

v-if and v-else Causing the button value to be cleared (When the v-if or v-else role of the button, one of which is dynamic value, the value of another button will be emptied)

Vue.js version

Vue:2.1.6

NOTE: This problem does not exist in Vue1.x

Reproduction Link

https://jsfiddle.net/ldneedu/c0xa3Len/5/

Steps to reproduce

Three sets of scenes
Click the Toggle button

<div id="app">
  <p>{{ message }}</p>
  <input type="button" @click="show=!show" value="Toggle">(Switch multiple times to see the results)
  <p>===========scene one=============</p>
 <input v-if="show" type="button" value="button 1">
  <input v-else type="button" :value="btnValue2">
  <p>===========scene two=============</p>
 <input v-if="show" type="button" value="button 1">
 <input v-else type="button" value="button 2">
 <p>===========scene tree=============</p>
 <input v-if="show" type="button" :value="btnValue1">
 <input v-else type="button" :value="btnValue2">
</div>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    show: true ,
    btnValue1: 'button 1',
    btnValue2: 'button 2'
  }
})
@defcc defcc added 2.x bug labels Dec 21, 2016
@defcc
Member
defcc commented Dec 21, 2016

Thanks @workwsl , Vue.js treats static attribute value as attribute, which causes this issue. I'll try to fix it. Currently you could use value binding as a workaround.

@defcc defcc self-assigned this Dec 21, 2016
@yyx990803 yyx990803 closed this in b3ebfef Dec 23, 2016
@yyx990803 yyx990803 added a commit that referenced this issue Jan 13, 2017
@yyx990803 yyx990803 Revert "also bind static special attrs as props (fix #4530)"
This reverts commit b3ebfef.
ab0a225
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment