Edited at

Vue.js 2 アップデートメモ

More than 3 years have passed since last update.

Migration from Vue 1.x

Vueの1.xからの移行ガイド(英語)

https://vuejs.org/guide/migration.html


[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

:sob:

new Vue({

el: '#VueApp',
components: {
App
}
})

:laughing::two_hearts:

new Vue({

render(h) {
return h(App)
}
}).$mount('#VueApp')


コンポーネント名を必ず設定


[Vue warn.]: found in anonymous component - use the "name" option for better debugging messages.

:sob:


component

export default {

data() {
return {
text: 'Hello Vue'
}
}
}

:laughing::two_hearts:


component

export default {

name: 'helloText' // コンポーネント名設定する
data() {
return {
text: 'Hello Vue'
}
}
}


コンポーネントにはルート要素が必要


[ERROR] template syntax error Component template should contain exactly one root element

https://vuejs.org/guide/migration.html#Fragment-Instances-deprecated

:sob:

<template>

<div class="div1"><div>
<div class="div2"><div>
</template>

:laughing::two_hearts:

<template>

<div class="divRoot">
<div class="div1"><div>
<div class="div2"><div>
</div>
</template>

or

<template>
<div>
<div class="div1"><div>
<div class="div2"><div>
</div>
</template>


v-elが使えなくなったのでrefを使用する


[Vue warn]: Failed to resolve directive: el

https://vuejs.org/guide/migration.html#v-el-and-v-ref-deprecated

:sob:

<div class="HelpItem"

v-el:help-item>
</div>

this.$els.helpItem

:laughing::two_hearts:

<div class="HelpItem"

ref="helpItem">
</div>

this.$refs.helpItem


Filter Argument Syntax

https://vuejs.org/guide/migration.html#Filter-Argument-Syntax


[Vue warn]: Failed to resolve filter: omit 100

:sob:

<div>{{ post.text | omit 100 }}</div>

:laughing::two_hearts:

<div>{{ post.text | omit(100) }}</div>


$eval


this.$eval is not a function

https://vuejs.org/guide/migration.html#Filters-Outside-Text-Interpolations-deprecated

:sob:

data() {

return {
helpSearch: '',
formatItems: [
{
title: 'Hello Vue',
excerpt: 'xxxxxxxxxxxxxxxxxx'
}
{
title: 'Hello Vue2',
excerpt: 'xxxxxxxxxxxxxxxxxx'
}
],
}
}
computed: {
filteredItems() {
return this.$eval('formatItems | filterBy helpSearch | limit 7')
}
}

:laughing::two_hearts:

data() {

return {
helpSearch: '',
formatItems: [
{
title: 'Hello Vue',
excerpt: 'xxxxxxxxxxxxxxxxxx'
}
{
title: 'Hello Vue2',
excerpt: 'xxxxxxxxxxxxxxxxxx'
}
]
}
}
computed: {
filteredItems() {
return this.formatItems.filter((item) => {
const searchRegex = new RegExp(this.helpSearch, 'i')
return (
searchRegex.test(item.title) ||
searchRegex.test(item.excerpt)
)
})
}
}