I'm getting this error when i try to update my data fields in vuejs.
data() {
return {
form : useForm({
imageFile : null,
img_id : null,
}),
product_images : this.images,
}
},
here I'm updating the product_images after the success of post request sent by the user.
like this.
this.form.post(url, {
onStart : () => {
Inertia.on('progress', (event) => {
if (event.detail.progress.percentage) {
NProgress.set((event.detail.progress.percentage / 100) * 0.98);
}
});
},
onFinish : () => {
this.product_images = this.images;
},
})
showing the product_images in template be like
<div v-for="image in product_images" class="col-xl-4 col-lg-6 col-12 mb-3" :key="image.id">
<input-image #changeImage="onChangeImage" :id="image.id" :image="image.image" />
</div>
when product_images changes after the post request, product_images not update in DOM but get this error why?
app.js:12889 Uncaught (in promise) TypeError: Cannot read property 'insertBefore' of null
at insert (app.js:12889)
at mountElement (app.js:9604)
at processElement (app.js:9545)
at patch (app.js:9465)
at patchKeyedChildren (app.js:10315)
at patchChildren (app.js:10093)
at processFragment (app.js:9839)
at patch (app.js:9461)
at patchKeyedChildren (app.js:10174)
at patchChildren (app.js:10117)
Unfortunately the vue error message is not very helpful.
In my case, I had some uninitialized data in the html template like this:
<template>
<div>
{{ data.xyz }}
</div>
</template>
Change this to either:
<template v-if="!!data">
<div>
{{ data.xyz }}
</div>
</template>
Or:
<template>
<div>
{{ data?.xyz }}
</div>
</template>
I fixed it by updating my Vue to the latest version (vue#3.2.20).
In my case, was mistakenly calling app.mount('#app') twice.
Related
In my project using laravel 7. I'm using vue as frontend framework.
First in my controller I send only one attribute from my query into my template:
$sites = Site::with('users')->where('user_id', Auth::user()->id)->get();
// This is the part
$website_name = '';
if (sizeof($sites) == 0) {
// I fetch website attribute
$website_name = Auth::user()->website;
}
return view('axcess.sites.edit', [
'sites' => $sites,
'website_name' => $website_name // Send it into blade template
]);
In my blade template I send $website_name into component
<div class="row">
<axcess-sites-edit
:websiteName="{{ $website_name }}"
:isNewUser="{{ sizeof($sites) == 0 }}"
></axcess-sites-edit>
</div>
The full vue component is this:
<template>
<div class="col-md-8">
<form>
<div class="form-group">
<input class="form-control" :disabled="isNewUser" v-model="website" />
</div>
</form>
</div>
</template>
<script>
export default {
props: {
websiteName: String,
isNewUser: Boolean
},
data: function() {
return {
website: this.websiteName
}
}
}
</script>
Finally display the page as empty, in my console only display this error:
The problem comes from (:) symbol from http://example.com. There exists a solution for this to display into the input value.
I want to pass an array called hours from a Laravel controller to a Vue.js component but for some reason it's not working.
As you can see in the following code, I am trying to create dynamically the options inside a select that is located inside a component but for some reasons I see no options in that array.
In the view I created a <p> to check that the returning array from controller be correct and finally it is correct because in the view I am able to see the second value of the array.
But for some reasons I cannot visualize the values of the array inside the component.
This is my controller code:
$open_at = '00:00';
$close_at = '23:45';
$time = new DateTime($open_at);
$close = new DateTime($close_at);
while ($time < $close) {
$hours[] = $time->format('H:i');
$time->modify('+15 minutes');
}
return view('create')->with('hours', $hours);
This is my view code:
#extends('layouts.app')
#section('content')
<div class="container">
<div id="app">
<create-form :hours="hours"></create-form>
</div>
<p>
{{ $hours[1] }}
</p>
</div>
#endsection
This is code inside the template component:
<div class="form-group">
<label for="start">Start Hour:</label>
<select class="form-control" id="start">
<option v-for="hour in hours" :key="hour.id">
{{ hour }}
</option>
</select>
</div>
This is the my export_default:
export default {
props: ['hours[]'],
mounted() {
console.log('Component mounted.');
this.loadUsers();
this.loadRooms();
},
data: function() {
return {
users: [],
rooms: []
}
},
methods: {
loadUsers: function() {
axios.get('api/users')
.then((response) => {
this.users = response.data.data;
})
.catch(function(error) {
alert('noviva');
console.log(error);
});
},
loadRooms: function() {
axios.get('api/rooms')
.then((response) => {
this.rooms = response.data.data;
})
.catch(function(error) {
alert('noviva');
console.log(error);
});
}
}
}
I visualize the following warning in the console:
Property or method "hours" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
Can help?
The definition of your props property doesn't match the name by which $hours is passed to the component
props: ['hours'],
And again you do not have id on hours the way you are constructing the hours[] in controller so the template will give another error when you try :key="hour.id
You must either construct the hours array in controller such that it has an id for every entry or (not recommended) you can use the index in the v-for loop as key
<div class="form-group">
<label for="start">Start Hour:</label>
<select class="form-control" id="start">
<option v-for="(hour, index) in hours" :key="index">
{{ hour }}
</option>
</select>
</div>
PHP arrays and objects can be passed to javascript/vue as props by json encoding them
//Using the blade helper #json
<div id="app">
<create-form :hours='#json($hours)'></create-form>
</div>
//OR using json_encode()
<div id="app">
<create-form :hours="{{ json_encode($hours) }}"></create-form>
</div>
I am trying to retrieve data from REST API. I got below code from a tutorial which are not working in my machine but working in that video.
<template>
<div>
<h2>Articles</h2>
<div class="card mb-2" v-for="article in articles" v-bind:key="article.id">
<div class="card-header">
{{ article.title }}
</div>
<div class="card-body">
{{ article.body }}
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
articles : [],
article : {
id : '',
title : '',
body : ''
},
article_id : '',
pagination : {},
edit : false
}
},
created(){
this.fetchArticles();
},
methods:{
fetchArticles(){
fetch('api/articles')
.then(res => res.json())
.then(res => {
this.arcticles = res.data;
console.log(res.data);
})
}
}
}
</script>
After few research I changed my code to
<template>
<div>
<h2>Articles</h2>
<div class="card mb-2" v-for="article in articles" v-bind:key="article.id">
<div class="card-header">
{{ article.title }}
</div>
<div class="card-body">
{{ article.body }}
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
articles : [],
article : {
id : '',
title : '',
body : ''
},
article_id : '',
pagination : {},
edit : false
}
},
created(){
axios
.get('api/articles')
.then(res => {
this.articles = res.data.data;
console.log(res.data.data);
})
},
}
</script>
and it's working fine.
I want to fix the previous code (from the tutorial). Otherwise I'll not get further lessons.
From MDN documentation, the json() method is implemented on Response body, and it returns a promise wich resolves to result of parsing the body text as json.
response.json().then(data => {
// do something with your data
});
So, when using in fetch, the correct syntax is:
fetchArticles(){
fetch('api/articles')
.then(res => res.json())
.then(data=> {
this.arcticles = data; // the result here contains only the json data, it is not a response object, so it does not have a 'data' property.
console.log(data);
})
}
How to access axios result from vue component in blade file? I tried accessing {{value}} within 'app' div also. But the error still remains. I want to generate partial views based on the value of axios response.
IssueComponent.vue
<template>
<div>
<div class="form-group">
<label>Enter Accession No</label>
<input
type="text"
name="accession_no"
placeholder="Accession No"
class="form-control"
v-on:keyup.enter="getData()"
v-model="query"
/>
</div>
<div>
<button class="btn btn-info" #click.prevent="getData()">Check</button>
</div>
</template>
<script>
export default {
data() {
return {
query: "",
value: []
};
},
methods: {
getData: function() {
var self = this;
axios
.get("/issue-getdata", { params: { q: self.query } })
.then(function(response) {
self.value = response.data;
})
.catch(function(error) {
console.log(error);
})
.then(function() {
});
}
}
};
</script>
create.blade.php
<form action="/issue" method="POST">
<div id="app">
<issue-component></issue-component>
</div>
{{value}} ///////// Undefined constant error
<button type="submit" class="button-btn btn-success">Submit</button>
#csrf
</form>
Controller Method
public function getData(Request $request){
$input = $request->q;
$acsNo = preg_replace("/[^0-9]/", "", $input);
$acsNoIssued = Issue::where('accession_no', '=', $acsNo)->where('is_returned', null)->orwhere('is_returned', 0)->first();
return response()->json($acsNoIssued);
}
The Error
Facade\Ignition\Exceptions\ViewException
Use of undefined constant value - assumed 'value' (this will throw an Error in a future version of PHP) (View: D:\ProgrammingSSD\laragon\www\ulclibrary\resources\views\issues\create.blade.php)
You can't. Blade is rendered server side. By the time your vue component makes the request, that {{ $value }} is already parsed and is now a static part of your view.
What you could do is save the state (the information) in VUE, and read it using another VUE component that will display the info (instead of blade).
Guide for states in vue
https://vuex.vuejs.org/guide/state.html
<form action="/issue" method="POST">
<div id="app">
<issue-component></issue-component>
</div>
<display-component-value></display-component-value> // Vue component that reads the state you want
<button type="submit" class="button-btn btn-success">Submit</button>
#csrf
</form>
I am trying to implement vue-multiselect (version 1.1.3) with Laravel 5.
In my vue file I have this code:
<template>
<div class="dropdown">
<multiselect
:seleted="multiValue"
:show-labels="false"
:options="options"
:placeholder="placeholder"
:searchable="true"
:allow-empty="false"
:multiple="true"
key="name"
label="name"
#update="updateSelected"
></multiselect>
<label v-show="showLabel" for="multiselect"><span></span>Language</label>
</div>
</template>
<script>
import { Multiselect } from 'vue-multiselect';
export default {
components: { Multiselect },
props: {
selected: null,
options: {
type: Array, default: function () {
return []
}
},
placeholder: 'Select...'
},
methods: {
updateSelected (newSelected) {
this.selected = newSelected
}
}
}
</script>
In my blade file:
<div class="form-group">
<drop-down
:options="{{ $members_list->toJson() }}"
></drop-down>
</div>
In my controller:
$members = DB::table('members')
->orderBy('member_first_name', 'asc')
->get();
$members_list = $members->map(
function($member) {
return [
"value" => $member->member_id,
"label" => $member->member_first_name. " ". $member->member_last_name
];
}
);
When I run the page I get a select list with all the members in it, but when I try to select one, it turns Red, it is added to the selected list on top but I cannot select more options and in firebug I get this error:
[Vue warn]: You are setting a non-existent path "selected" on a vm instance. Consider pre-initializing the property with the "data" option for more reliable reactivity and better performance.
What am I missing?
Typo might be causing issues?
:seleted="multiValue"
Should be :selected="multiValue"
BTW :selected is deprecated in the version 2.0. :value has taken it's place.
I think it is because there is no variable called 'multiValue' in your component.
In :seleted="multiValue" , using the variable "options" instead of "multiValue"