nextTick
- 1. : vueインスタンスを作成 -vm
vm.message='ラブ・リンは本当に素晴らしいよvue のインスタンスデータを修正するために移動します。- : データを修正した後、vm.$el.textContentから直接vueインスタンスのデータを取得し、変更がないことを確認しましたが、プリントアウトはそのままです - Ponyboy
- Vue.nextTick メソッドを使用します：
- vueのデータが変更されても、すぐにdomページにレンダリングされないことに注意する必要があります。現在のコールバック関数でデータが変更された直後にVue.nextTickを使用すると、最新のDOMを取得できます！
- ⑤ : 今回、vm.$el.textContentのプリントアウトは、アイリーンにとって本当に良いものでした！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>{{message}}</h3>
</div>
<script src="./vue.js"></script>
<script>
//
1.
const vm = new Vue({
el:'#app',
data:{
message:'ポニーの
}
})
//
2.
vm.message = '愛リンは本当に素晴らしい;
console.log(vm.$el.textContent); //
3.
// データが変更された後、vueがDOMの更新を終えるのを待つために、データが変更された直後にVueを使うことができる。.nextTick 現在のコールバック関数では、最新のDOMを取得することができる
//
Vue.nextTick(()=>{
console.log(vm.$el.textContent); // 愛リンは本当に素晴らしい！
})
</script>
</body>
</html>
nextTick
要件
ページ上のフローティングコンポーネントが依存するデータを返すインタフェースを、ページ上に引き出します。
そして、インターフェイスがデータを返すとすぐに、このフローティング・コンポーネントを表示します。
表示中に、バックエンドにいくつかのデータを報告します。
問題：データを取得しましたが、フローティングレイヤーを表示すると、データがコンポーネントに更新されず、レポートが失敗します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'>
<App></App>
</div>
<script src="./vue.js"></script>
<script>
/*
:
ページ上のフローティングコンポーネントが依存するデータを返すインターフェイスを、ページ上にプルする。，
そして、インターフェイスがデータを返すと同時に、このフローティング・コンポーネントを表示する。，
バックエンドにデータを報告する，
この時、何か不思議なことが起こったが、私はデータを得たが、フローティングレイヤーは、時間を表示する，
データがコンポーネントに更新されていない、レポートが失敗する
*/
//フローティング・コンポーネント・ポップ
const Pop = {
data() {
return {
isShow: false
}
},
props: {
name: {
type: String,
default: ''
},
},
template: `
<div v-if='isShow'>
{{name}}
</div>
`,
methods: {
show() {
this.isShow = true; //ポップアップウィンドウのコンポーネント表示
console.log(this.name); //
1. 結果は空である；
2. No.は、結果ponyboyをプリントアウトする
}
},
}
//
const App = {
data() {
return {
name: ''
}
},
created() {
// 非同期リクエストをシミュレートする
setTimeout(() => {
// データ更新
this.name = 'ポニーの;
//this.$refs.pop.show();
1.
this.$nextTick(()=>{
this.$refs.pop.show(); //
2.
})
}, 1000);
},
components: {
Pop
},
template: `<pop ref='pop' :name='name'></pop>`
}
const vm = new Vue({
el: '#app',
components: {
App
}
})
</script>
</body>
</html>
- No.：このポジションを実行すると、ページ上のデータが更新されても、コンソールのプリントアウトは空になります。
- いいえ ② ： $nextTick関数のコールバック関数を使用した後、つまり②の位置で呼び出した後、コンソールに結果を出力できます ポニーボーイ
