Vue.노트 업데이트
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.
componentexport default {
data() {
return {
text: 'Hello Vue'
}
}
}
componentexport 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)
)
})
}
}
Reference
이 문제에 관하여(Vue.노트 업데이트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tmiame/items/34823b22cd3829321120
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
export default {
data() {
return {
text: 'Hello Vue'
}
}
}
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)
)
})
}
}
Reference
이 문제에 관하여(Vue.노트 업데이트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tmiame/items/34823b22cd3829321120
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<div class="HelpItem"
v-el:help-item>
</div>
this.$els.helpItem
<div class="HelpItem"
ref="helpItem">
</div>
this.$refs.helpItem
[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)
)
})
}
}
Reference
이 문제에 관하여(Vue.노트 업데이트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tmiame/items/34823b22cd3829321120
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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)
)
})
}
}
Reference
이 문제에 관하여(Vue.노트 업데이트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tmiame/items/34823b22cd3829321120텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)