This rules disallows using arrow functions to defined watcher.The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect.(see here for more details(opens new window))
@MeowBook nks-frontend % nodenv
nodenv 1.4.0+3.631d0b6
Usage: nodenv <command> [<args>]
Some useful nodenv commands are:
commands List all available nodenv commands
local Set or show the local application-specific Node version
global Set or show the global Node version
shell Set or show the shell-specific Node version
install Install a Node version using node-build
uninstall Uninstall a specific Node version
rehash Rehash nodenv shims (run this after installing executables)
version Show the current Node version and its origin
versions List installed Node versions
which Display the full path to an executable
whence List all Node versions that contain the given executable
See `nodenv help <command>' for information on a specific command.
For full documentation, see: <https://github.com/nodenv/nodenv#readme>
nodenv versions で既にインストール済みのバージョンを確認。
@MeowBook nks-frontend % nodenv versions
system
* 15.14.0 (set by /Users/ｘｘｘ/Documents/ｘｘｘ-frontend/.node-version)
16.0.0
16.2.0
<template>
<div>
<v-container>
<p>{{ longText }}</p>
</v-container>
<Footer />
</div>
</template>
<script>
export default {
data() {
return {
longText:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
}
},
}
</script>
<template>
<div>
<v-container>
<p>{{ longText | readMore(20, '...') }}</p> // フィルタを適用
</v-container>
<Footer />
</div>
</template>
<script>
export default {
filters: {
readMore: (text, length, suffix) => {
return text.substring(0, length) + suffix
},
}
data() {
return {
longText:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
}
},
}
</script>
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/21dc8545.df3eefc9.21dc8546.d6603571/?me_id=1272237&item_id=10010830&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fzeitakuya%2Fcabinet%2Fjewelry-zeitakuya%2Fz-tr-12.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/21dc86fe.7d4d9d4c.21dc86ff.5e283dda/?me_id=1313114&item_id=10270559&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fdengding%2Fcabinet%2Fshin20%2Fs141_1.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[Sourcetree基礎]プロジェクトで使用する際の最初の一歩](https://nolyc.net/wp-content/uploads/2021/08/sourcetree.png)
![[Nuxt.js, Vue.js, ESLint]監視プロパティwatchではアロー関数が使えない](https://nolyc.net/wp-content/uploads/2021/07/Untitled_Artwork.png)
![[node.js]バージョン切り替え方法](https://nolyc.net/wp-content/uploads/2021/07/Untitled_Artwork-2.png)
