this.$nextTick
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修...
this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回...
总的来说，假设我们更改了某个 dom 元素内部的文本，而这时候...
#codeprettify{{
<template>
<button ref="tar"
type="button"
name="button"
@click="testClick">\{\{content\}\}</button>
</template>
<script>
export default {
data () {
return {
content: '初始值'
}
}
methods: {
testClick(){
this.content = '改变了的值'
// 这时候直接打印的话，由于dom元素还没更新
// 因此打印出来的还是未改变之前的值
console.log(this.$refs.tar.innerText) //...
}
}
}
</script>
}}
this.$nextTick这个方法作用是，当数据被修改后使用这个方法...
#codeprettify{{
methods：{
testClick() {
this.content = '改变了的值'
this.$nextTick(() => {
// dom元素更新后执行，因此这里能正确打印更改...
console.log(this.$refs.tar.innerText) // 改变...
})
}
}
}}
* 应用场景 [#u819acf9]
** 背景 [#h6b0da17]
vue-element-ui 中 form中有个清空表单的方法，即假如给表单...
当在dialog组件中用这个方法的时候，会出现问题无法清空。
** 问题原因 [#n8f8751b]
第一次打开dialog的时候给表单绑定的form赋值了，这时候这个f...
如表单绑定的值为：
#codeprettify{{
form: {
age: 0,
name: ''
}
}}
但在你打开dialog编辑的时候，你又对它进行赋值,如
#codeprettify{{
this.form = {
age:23,
name:"lala"
}
}}
** 解决方案 [#v4609403]
解决方式是，等dialog已经初始化之后再给form赋值，也就是
#codeprettify{{
this.$nextTick(() => { // 这里开始赋值 this.form.age= 23;...
}}
这个时候form表单会默认这个新赋的值为初始值
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本情報はVue 2.0を基づいて説明して...
#contents
this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修...
this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回...
总的来说，假设我们更改了某个 dom 元素内部的文本，而这时候...
#codeprettify{{
<template>
<button ref="tar"
type="button"
name="button"
@click="testClick">\{\{content\}\}</button>
</template>
<script>
export default {
data () {
return {
content: '初始值'
}
}
methods: {
testClick(){
this.content = '改变了的值'
// 这时候直接打印的话，由于dom元素还没更新
// 因此打印出来的还是未改变之前的值
console.log(this.$refs.tar.innerText) //...
}
}
}
</script>
}}
this.$nextTick这个方法作用是，当数据被修改后使用这个方法...
#codeprettify{{
methods：{
testClick() {
this.content = '改变了的值'
this.$nextTick(() => {
// dom元素更新后执行，因此这里能正确打印更改...
console.log(this.$refs.tar.innerText) // 改变...
})
}
}
}}
* 应用场景 [#u819acf9]
** 背景 [#h6b0da17]
vue-element-ui 中 form中有个清空表单的方法，即假如给表单...
当在dialog组件中用这个方法的时候，会出现问题无法清空。
** 问题原因 [#n8f8751b]
第一次打开dialog的时候给表单绑定的form赋值了，这时候这个f...
如表单绑定的值为：
#codeprettify{{
form: {
age: 0,
name: ''
}
}}
但在你打开dialog编辑的时候，你又对它进行赋值,如
#codeprettify{{
this.form = {
age:23,
name:"lala"
}
}}
** 解决方案 [#v4609403]
解决方式是，等dialog已经初始化之后再给form赋值，也就是
#codeprettify{{
this.$nextTick(() => { // 这里开始赋值 this.form.age= 23;...
}}
这个时候form表单会默认这个新赋的值为初始值
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
