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

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)

new Vue({
  el: '#VueApp',
  components: {
    App
  }
})

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

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

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

component

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

component

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

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

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

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

<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

<div class="HelpItem"
     v-el:help-item>
</div>

this.$els.helpItem

<div class="HelpItem"
     ref="helpItem">
</div>

this.$refs.helpItem

Filter Argument Syntax

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

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

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

$eval

this.$eval is not a function

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

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)
      )
    })
  }
}