i have problem with showing vue variable on blade template
my layouts/master.blade.php
<html>
<head>
<title>#yield('title') | My company</title>
.....
news.blade.php
#extends('layouts.master')
<div id="pagetitle">
#section('title', #{{pagetitle}} )
</div>
#section('content')
....
#endsection
resources/js/news.js
new Vue({
el: '#pagetitle',
data: {
pagetitle:'',
},
mounted() {
this.fetchArticlesPage();
},
methods: {
fetchArticlesPage(page_url) {
page_url = '/api/articles/news';
fetch(page_url)
.then(res => res.json())
.then(res => this.pagetitle = res.page_title)
.catch(err => console.log(err));
},
}
});
and this response data from controller with jsonResource
{
"links": {
"first": "http://localhost:8000/api/articles/news?page=1",
"last": "http://localhost:8000/api/articles/news?page=1",
"prev": null,
"next": null
},
"meta": {
"current_page": 1,
"from": 1,
"last_page": 1,
"path": "http://localhost:8000/api/articles/news",
"per_page": 3,
"to": 3,
"total": 3
},
"page_title": "News"
}
i got syntax error unexpected {
if i put on #section('content') like this
#section('content')
<div id="pagetitle">
#{{pagetitle}}
</div>
#stop
it' fine and will show the data which is "News",
please help, am new in vue and laravel programing
The Blade template directives are processed in the server and a response sent to the client.
After this, Vue template directives are processed in the browser.
On that account, the later example with the escaped Vue mustache works as expected as the block below is sent to the browser as a part of the overall response content.
<div id="pagetitle">
{{pagetitle}}
</div>
The Vue program running in the browser then runs, and interpolates variables in this template.
For the former example,
#section('title', #{{pagetitle}})
will result in an error in the server when it tries to compile the section as the second parameter is not given as a string.
This error can be corrected by quoting the escaped Vue mustache.
#section('title', '#{{pagetitle}}')
EDIT: {{pagetitle}} is not compiled is in document head
The Vue instance that is created is mounted on an element contained in the body. For this reason, compilation happens only on the document tree of the element that the Vue instance is mounted on.
I suggest to create a separate Vue instance to manage the head of the document. e.g.
const helmet = new Vue({
el: 'head',
data: {
pagetitle:'',
},
mounted() {
this.fetchArticlesPage();
},
methods: {
fetchArticlesPage(page_url) {
page_url = '/api/articles/news';
fetch(page_url)
.then(res => res.json())
.then(res => this.pagetitle = res.page_title)
.catch(err => console.log(err));
},
}
})
u can try this
#section('title', #pagetitle)
Related
I have a text area as below:
<textarea class="from-control" name="body" id="body" v-html="pageForm.body" v-model="pageForm.body" rows="5" style="width:100%"></textarea>
Script:
<script>
export default {
components: {},
data() {
return {
pageForm: new Form({
body: '',
}),
};
},
props: [],
mounted() {
},
methods: {
update() {
let loader = this.$loading.show();
this.pageForm.patch('/api/frontend/google-map/')
.then(response => {
toastr.success(response.message);
loader.hide();
})
.catch(error => {
loader.hide();
helper.showErrorMsg(error);
});
},
}
}
</script>
I am sending an <iframe> from the <textarea> via axios patch request as <iframe src="some url"></iframe>
But in the laravel controller I receive $request->body = ""
Any ideas how do I achieve this?
Note:Form binding is working fine, but get empty value in Laravel Controller
I am using Laravel 5.8 + Vue.js in my project.
Trying to get a single data from a controller but nothing is displaying.
I added the 12345 in the component to check if the component is working, 12345 is showing well.
controller
public function getSingleData($idx)
{
$paymentData = PaymentData::where('idx', $idx)->first();
return view('paydetail')->with('paymentData', $paymentData);
}
router
Route::view('/paylist', 'paylist')->name('paylist.view');
Route::get('/paylist/data', 'PaymentController#getPaymentData')->name('paylist');
Route::get('/paydetail/{idx}', 'PaymentController#getSingleData')->name('paydetail');
blade
#extends('layouts.default')
#section('content')
<div class="container">
<paydetail :idx="{{ $paymentData->idx }}"></paydetail>
app.js
Vue.component('paydetail', require('./components/Paydetail.vue').default);
Paydetail.vue
<template>
<div>
<h2>12345</h2>
<div v-for="val in paymentData">
<h2>{{ val.app_name }} </h2>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
props: [ 'idx' ],
data() {
return {
paymentData: [{}],
}
},
created() {
this.paymentData = this.getPayDetailData();
console.log(this.idx);
console.log("here");
},
methods: {
getPayDetailData() {
axios({
method: 'GET',
url: '/paydetail/'+ this.idx
}).then(
response => {
console.log(response)
return response
},
error => {
console.log(error)
}
)
},
},
}
</script>
The result of console.log(response) is weird. It shows the whole html document which I don't understand at all.
It shows like this.
{data: "<!DOCTYPE html>↵<html>↵ <head>↵ <meta ch…>↵<!-- For Datatable -->↵↵↵ </body>↵</html>↵", status: 200, statusText: "OK", headers: {…}, config: {…}, …}
What did I wrong here?
I have a project with Laravel + vue.js.
I made a vue component and it takes some data from a controller.
I wanted to display the data in the view using v-for, but nothing is displaying.
vue template code
<template>
<div v-for="val in expiredIos" class="card col-xs-12 col-md-5 col-lg-2 m-1 p-0 d-inline-block">
<div class="mx-0 p-2 text-truncate" style="width:10rem;vertical-align:middle;">
{{ val.app_name }}
</div>
</div>
...
</template>
vue script part
export default {
data: function() {
return {
expiredIos: []
}
},
mounted() {
console.log("expired here");
this.getExpiredIosData();
},
methods: {
getExpiredIosData: function() {
axios.post('/expired')
.then(response => {
for (var i = 0; i < response.data.length; i++) {
this.expiredIos[i] = response.data[i];
console.log(this.expiredIos[i]);
}
});
}
},
}
The result of console.log
{app_name: "app1", app_id: "migunstyle", ios_dev_exp: "2019-01-16"}
{app_name: "app2", app_id: "jcalling", ios_dev_exp: "2019-02-19"}
{app_name: "app3", app_id: "modoobebe", ios_dev_exp: "2019-03-08"}
{app_name: "app4", app_id: "babyfactory", ios_dev_exp: "2019-03-19"}
{app_name: "app5", app_id: "merrygirl", ios_dev_exp: "2019-03-21"}
...
What did I wrong here?
Try setting the entire array to the data property directly.
getExpiredIosData: function() {
axios.post('/expired')
.then(response => {
this.expiredIos = response.data; // <-- Set property directly
});
}
Vue tracks all data properties, but tracking array changes is something it cannot do. You need to either use the build in array manipulation functions or replace the array entirely for vue to pick up the change.
https://v2.vuejs.org/v2/guide/list.html#Array-Change-Detection
Axios loads data without any problem, doesn't show any data, Laravel Mix builds without error.
I have following code:
index.html (body)
<div id="app">
<posts></posts>
</div>
In app.js I use this:
import Vue from 'vue';
// global declare axios
window.axios = require('axios');
import Posts from './components/Posts';
Vue.component('posts', Posts);
new Vue({
el: '#app',
props: {
posts:[{
userId: [Number],
id: [Number],
title: [String, Number]
}]
}
});
In the Posts.vue component I create a template and a script loading the data when mounted:
<template>
<ul>
<li v-for="post in posts" v-text="post.title"></li>
</ul>
</template>
<script>
export default {
data: function() {
return {
posts: null,
}
},
// when stuff is loaded (document ready)
mounted: function() {
// use placeholder data for tests, capture asynchronous data from site using this.
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => this.posts = response.posts)
.catch(error => this.posts = [{title: 'No posts found.'}])
.finally(console.log('Posts loading complete'));
},
}
</script>
So the data should be shown as a ul list:
<ul>
<li>
title
</li>
<li>
title
</li>
<li>
title
</li>
</ul>
Try the code below, I've made comments on the bits that need changing.
data() {
return {
posts: [] // this should be an array not null
};
},
// you can do this on created instead of mounted
created() {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
this.posts = response.data; // add data to the response
});
` Here "this.post" not take it has instance in axios call.So you have follow like this. `
var vm=this;
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => vm.posts = response.posts)
.catch(error => vm.posts = [{title: 'No posts found.'}])
.finally(console.log('Posts loading complete'));
I am playing around with Vuejs in our project. I have used the same technique in my other project and its working. But here I am not able to assign the data return by the fetch request to a json resource.
When I try to access data returned in then and put it in alert it does gives me the data objects. but I want to assign it to my data attribute packages array.
Here is my component code
<template>
<div id="packages">
<div class='radio' v-for="package in packages">
<label>
<input type='radio' name='packageradio' v-bind:value="package.id">{{ package.quantity }}
<span id='price-tag'>{{ package.price }}</span>
</label>
</div>
</div>
</template>
<script>
export default {
data(){
return {
packages:[]
}
},
created(){
this.fetchPackages();
},
methods: {
fetchPackages: function(){
fetch('/die-cut/size/4/packages')
.then(res => res.json())
.then(function(res){
alert("i am hit");
this.packages = res;
})
.catch(err => console.log(err));
}
}
}
</script>
This is the api:
[
{
"id": 1,
"quantity": 50,
"price": 400,
"saving": 100,
"size_id": 4,
"sticker_id": 2,
"created_at": "2018-02-21 17:48:46",
"updated_at": "2018-02-21 17:48:46"
},
{
"id": 2,
"quantity": 100,
"price": 900,
"saving": 100,
"size_id": 4,
"sticker_id": 2,
"created_at": "2018-02-21 17:50:43",
"updated_at": "2018-02-21 17:50:43"
}
]
The data for packages should be working fine. The problem I see in your code is with the following html:
<label>
<input type='radio' name='packageradio' v-bind:value="package.id">
{{ package.quantity }}
<span id='price-tag'>{{ package.price }}</span>
</label>
From the documentation for the label element:
label can permit the Phrasing content, but no descendant label elements. No labelable elements other than the labeled control are allowed.
So, in your code having input a flow content is the key issue.
The issue with your code is:
.then(function(res){
alert("i am hit");
this.packages = res;
// this isn't referenced to the vue instance from the function scope
})
Replace it with this:
.then(res => { // access parent scope
alert("i am hit");
this.packages = res; // now, this will access the vue instance
})
I think its to do with your this keyword so, either use the ES5 syntax or do some thing like this
fetchPackages: function(){
var vm = this
fetch('/die-cut/size/4/packages')
.then(res => res.json())
.then(function(res){
alert("i am hit");
vm.packages = res;
})
.catch(err => console.log(err));
}
Or off course you can go ahead and do something like this,
fetchPackages(){
fetch('/die-cut/size/4/packages')
.then(res => res.json())
.then((res) => {
alert("i am hit");
this.packages = res;
})
.catch(err => console.log(err));
}