Giriş yapmadınız.

Duyuru

TÜRKÇE KİTAP DUYURUSU:
Laravel 5 : Laravel 5.1 Güzelliği (Türkçe)
Vue.js 2 : Vue.js 2 Majesteleri (Türkçe)

#1 22.02.2017 07:26:36

m.erin
Üye
Yer: Konya
Kayıtlı: 26.12.2012
Mesajlar: 165
Website

Custom filter sorunu

Merhaba arkadaşlar.

app.js içerisinde bir custom filter tanımlaması yapıyorum. Filter kodum şu:

Vue.filter('nl2br', (text) => {
    return text.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '<br>')
})

Fakat ilgili filter' ı herhangi bir component içerisinde kullanmaya çalıştığımda konsolda aşağıdaki hatayı alıyorum:

[Vue warn]: Property or method "nl2br" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in component <postshow> at /Users/mews/Projects/PHP/laravel/resources/assets/js/components/PostShow.vue)

Sizce sorun ne olabilir?

Son düzenleyen m.erin (22.02.2017 07:26:48)

Çevrimdışı

#2 23.02.2017 04:33:55

sineld
Yönetici
Yer: Bursa
Kayıtlı: 26.12.2012
Mesajlar: 1,397
Website

Yanıt: Custom filter sorunu

Filtreyi henüz tanımlanmadan çalıştırdınız şeklinde hata veriyor.

Kullandığınız satırdan önce tanımlamış olduğunuzdan emin olun.

Çevrimdışı

#3 23.02.2017 06:49:30

m.erin
Üye
Yer: Konya
Kayıtlı: 26.12.2012
Mesajlar: 165
Website

Yanıt: Custom filter sorunu

@sineld, ufak bir nokta var gözden kaçırdığım ama kaç gündür çözemedim. Aşağıda kodları paylaşıyorum bir de siz kontrol edebilir misiniz?

app.js dosyası aşağıdaki gibi:

require('./bootstrap');

import App from './components/App'
import Navigation from './components/Navigation'
Vue.component('Navigation', Navigation);

import Home from './components/Home'
import About from './components/About'
import Posts from './components/Posts'
import PostShow from './components/PostShow'
import NotFound from './components/NotFound'
Vue.component('NotFound', NotFound);

Vue.filter('nl2br', (text) => {
    return text.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '<br>')
})

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: Home,
            name: 'home'
        },
        {
            path: '/about',
            component: About,
            name: 'about'
        },
        {
            path: '/posts',
            component: Posts,
            name: 'posts'
        },
        {
            path: '/posts/:id',
            component: PostShow,
            name: 'postShow'
        },
        {
            path: '*',
            component: NotFound,
            name: 'notFound'
        }
    ],
    mode: 'history'
})

const app = new Vue({
    el: '#app',
    render: h => h(App),
    router
});

bootstrap.js dosyası:

window._ = require('lodash');

window.$ = window.jQuery = require('jquery');

require('bootstrap-sass');

window.Vue = require('vue');

window.axios = require('axios');

window.VueRouter = require('vue-router');

window.VueResource = require('vue-resource');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

ve kullanırken hata aldığım component (PostShow.vue):

<template>
    <transition name="fade">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading" v-text="post.title"></div>
                        <div class="panel-body">
                            <p v-if="isLoading">Loading...</p>
                            <div>{{ post.content | nl2br }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    data() {
        return {
            isLoading: true,
            post: Object
        }
    },
    mounted() {
        console.log('Post show mounted.')
    },
    methods: {
        fetchData() {
            this.$http.get(`/api/posts/${this.$route.params.id}`)
                .then(response => {
                    this.post = response.body
                    this.isLoading = false
                }, response => {
                    console.log(response)
                })
        }
    },
    watch: {
        '$route': 'fetchData'
    },
    created() {
        this.fetchData()
    }
}
</script>

Edit: Şu anda aldığım hata değişti, daha doğrusu kullanım şeklime göre değişiyor smile
Komponent içerisinde veriyi template tagları içerisinde yazdırırsam ({{ post.content | nl2br }}) bu hatayı alıyorum:

[Vue warn]: Error when rendering anonymous component at /Users/mews/Projects/PHP/agent/resources/assets/js/components/PostShow.vue: 
Uncaught TypeError: Cannot read property 'replace' of undefined

v-text veya v-html ile tag içerisine yazdırırsam da bu hatayı alıyorum:

[Vue warn]: Property or method "nl2br" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in anonymous component at /Users/mews/Projects/PHP/agent/resources/assets/js/components/PostShow.vue)

Ayrıca bu hatalar sadece api aracılığıyla veriyi çekip aktardığım post nesnesindeki verileri yazdıdırırken oluyor ( {{ post.content | nl2br }} gibi...).
Statik bir metne filtreyi uyguladığımda hata vermiyor. Yani bunun gibi kullandığımda:
{{ 'Merhaba\rDünya' | nl2br }}
bana bu çıktıyı veriyor:
Merhab<br>Dünya

Son düzenleyen m.erin (23.02.2017 06:58:45)

Çevrimdışı

Forum alt kısmı