@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
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