Pourquoi ce code bogues dans certains cas? Vue.js (v2.0.0-rc.5)
J'ai remarqué qu'avec une double utilisation de l'attribut `ref` (qu'ils ont un nom different ou non d'ailleurs) avec les attributs `v-if`/`v-else`: Les attributs suivants `v-html` et `v-text` bogues... :-(
by Mike 'PhiSyX' S.
September 12, 2016
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.5/vue.js"></script>
<script id="tpl" type="x-template">
<div>
<div>
<p><strong>Without double use of attribute `ref`</strong></p>
All Works:
<div v-if="!showInput" @dblclick="dblclick">{{ elAttrvTexORtHtml }}: work syntax mustache</div>
<div v-else><textarea ref="textarea" @blur="showInput = false"></textarea></div>
<div v-if="!showInput1" @dblclick="dblclick1" v-text="elAttrvTexORtHtml + ': work `v-text`'"></div>
<div v-else><textarea ref="textarea1" @blur="showInput1 = false"></textarea></div>
<div v-if="!showInput2" @dblclick="dblclick2" v-html="elAttrvTexORtHtml + ': work `v-html`'"></div>
<div v-else><textarea ref="textarea2" @blur="showInput2 = false"></div>
</div>
<div>
<p><strong>With double use of attribute `ref`</strong></p>
This work:
<div ref="workif" v-if="!showInput4" @dblclick="dblclick4">{{ elAttrvTexORtHtml }}: work syntax mustache</div>
<div ref="workelse" v-else><textarea ref="textarea4" @blur="showInput4 = false"></textarea></div>
<br>
This doesn't work:
<div ref="bugif" v-if="!showInput5" @dblclick="dblclick5" v-text="elAttrvTexORtHtml + ': bug `v-text` on `@blur` (textarea)'"></div>
<div ref="bugelse" v-else><textarea ref="textarea5" @blur="showInput5 = false"></textarea></div>
<div ref="bugif1" v-if="!showInput6" @dblclick="dblclick6" v-html="elAttrvTexORtHtml + ': bug `v-html` (undefined???) on `@blur` (textarea)'"></div>
<div ref="bugelse1" v-else><textarea ref="textarea6" @blur="showInput6 = false"></div>
</div>
</div>
</script>
<div id="app"></div>
JavaScript
new Vue({
el: '#app',
template: '#tpl',
data: {
showInput: false,
showInput1: false,
showInput2: false,
showInput4: false,
showInput5: false,
showInput6: false
},
computed: {
elAttrvTexORtHtml: function () {
return 'Double click here please'
}
},
methods: {
dblclick: function () {
this.showInput = true
this.$nextTick(function () {
this.$refs.textarea.focus()
})
},
dblclick1: function () {
this.showInput1 = true
this.$nextTick(function () {
this.$refs.textarea1.focus()
})
},
dblclick2: function () {
this.showInput2 = true
this.$nextTick(function () {
this.$refs.textarea2.focus()
})
},
/**
*
*/
dblclick4: function () {
this.showInput4 = true
this.$nextTick(function () {
this.$refs.textarea4.focus()
})
},
dblclick5: function () {
this.showInput5 = true
this.$nextTick(function () {
this.$refs.textarea5.focus()
})
},
dblclick6: function () {
this.showInput6 = true
this.$nextTick(function () {
this.$refs.textarea6.focus()
})
}
}
})