Recently, I came across some code online that included a line $this=this. My initial interpretation was that this line assigns the 'this' of the outer function to a variable, allowing it to be used in the inner function as well. However, upon further examination, I realized that using this directly in the inner function yielded the same result. Am I overlooking something important here?
<div id="app">
<ul>
<li v-for="(item, index) in goods" :key="index">
<span>name：{{item.name}}</span>
<span>price：{{item.price.toFixed(2)}}</span>
<span>number:{{item.num}}</span>
<br>
<input type="button" value="+" @click="item.num += 1">
<input type="button" value="-" @click="item.num -= 1">
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
goods: []
},
created () {
let $this = this;
setTimeout(() => {
$this.goods = [
{
name: 'android',
price: 12.99
},
{
name: 'IOS',
price: 13.99
},
{
name: 'javaScript',
price: 14.99
}
];
$this.goods.forEach(item => {
item.num = 1;
});
}, 3000);
}
});
</script>