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

workwsl · 2016-12-21T03:10:07Z

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

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 · 2016-12-21T05:44:35Z

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.

This reverts commit b3ebfef.

defcc added 2.x bug labels Dec 21, 2016

defcc self-assigned this Dec 21, 2016

yyx990803 closed this as completed in b3ebfef Dec 23, 2016

defcc mentioned this issue Jan 5, 2017

Strange binding behaviour #4658

Closed

yyx990803 added a commit that referenced this issue Jan 13, 2017

Revert "also bind static special attrs as props (fix #4530)"

ab0a225

This reverts commit b3ebfef.

yyx990803 added a commit that referenced this issue Jan 13, 2017

fix #4530 with smaller change scope

08bd81f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

workwsl commented Dec 21, 2016 •

edited

defcc commented Dec 21, 2016

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

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

Comments

workwsl commented Dec 21, 2016 • edited

Vue.js version

Reproduction Link

Steps to reproduce

defcc commented Dec 21, 2016

workwsl commented Dec 21, 2016 •

edited