I want to update a custom property value inside a child component,
and also want to get event whenever the value is changed.
So, I tried both v-model: and #update:, like this.
<CustomName v-model:custom-name="name"
#update:custom-name="nameChanged"/>
// CustomName.vue
<script>
export default {
name: 'CustomName',
props: {
customName: String
},
emits: ['update:customName'],
setup(_, {emit}) {
const customNameChanged = (event) => {
emit('update:customName', event.target.value)
}
return {
customNameChanged
}
}
}
</script>
<template>
<input :value="customName" #change="customNameChanged"/>
</template>
I expected that name is changed and nameChanged is called,
but name is not changed.
I tried some cases at the vue sfc playground.
The result is,
(1) When I use camelCase, value is updated and method is called.
<CustomName v-model:customName="name4"
#update:customName="nameChanged"/>
(2) But when I use kebab-case, value is NOT changed and method is called.
<CustomName v-model:custom-name="name3"
#update:custom-name="nameChanged"/>
(3) Without #update:, camelCase and kebab-case are worked well.
<CustomName v-model:custom-name="name1"/>
<CustomName v-model:customName="name2"/>
Is this right? Is it illegal to use v-model with #update? Or should I use camelCase?
Related
I try to add my custom component to my Laravel Spark instance and always get the error:
Property or method "obj" is not defined on the instance but referenced during render..
It all works fine if i only bind a data value (ex. "testkey") without a loop...but if i add the for loop i receive this error...so my code:
app.js (spark)
require('spark-bootstrap');
require('./components/bootstrap');
//my new Component
import OmcListObjects from './components/modules/omc/objectlist.vue';
Vue.component('omc-objectlist', OmcListObjects);
var app = new Vue({
mixins: [require('spark')]
});
my Component (objectlist.vue)
<template>
<div :for="(obj in objlist)" class="property-entry card col- col-md-4 shadow-sm">
</div>
</template>
<script>
export default {
data () {
return {
objlist: [{title: 'test1'}, {title: 'test2'}],
testkey: 'testval'
}
}
}
</script>
I think you mean by :for the v-for directive, directives are always prefixed by v- like v-for one in which the compiler can recognize the obj variable as an temporary element used in the loop, but if you set :for which is recognized as a prop bound to a data or another property.
I'm setting up some Vue Components in my Laravel 5.8 application, that require user information available through Auth::user(), most importantly, the api_token that I must use in my axios requests. I want to pass the Auth::user() object from Laravel to Vue in a secure and private method.
I initially passed the object as props, but I don't want private information on the object to be easily exposed using browser extensions such as Vue DevTools. Now, I've been searching for a way to define global variables inside the Blade Template and access them in Vue:
Pass data from blade to vue component
https://forum.vuejs.org/t/accessing-global-variables-from-single-file-vue-component/638
https://zaengle.com/blog/layers-of-a-laravel-vue-application
Based on those links above, it seems like what I need to do is set the variables to the window object, but I'm unsure on what I'm doing something wrong to achieve this. When I define the variable in the Blade Template, I can see the variable is assigning properly by doing console.log() but the problem comes when I try to use it in Vue.
app.blade.php
#if(Auth::user())
<script>
window.User = {!! json_encode(Auth::user()) !!}
console.log(window.User)
</script>
#endif
component.vue
<script>
export default {
data: function() {
return {
user: window.User
}
}
}
</script>
I've tried setting the data as window.User, this.User, and simply just User but it always comes up as undefined. What am I missing? Or is there any other/better way to do this?
Try the following Vue Component:
<template></template>
<script>
export default {
data: function() {
return {
user: window.User
}
},
created(){
console.log(this.user)
},
}
</script>
I could see the user data from the console.log in Vue component.
i am already sending a variable from laravel to my vuejs like below : but when i want to use it in a component as an string it gives not defined error my vue component code is like below
export default {
props: ['reserve_end'],
data(){
return {
date: '',
}
},
}
// the component part
import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
Vue.use(VuePersianDatetimePicker, {
name: 'custom-date-picker',
props:
{
min: //i want to use the reserve_end here as an string
}
});
and finally the html markup
<custom-date-picker v-model="date"></custom-date-picker>
but in the end it wont load and gives error that reserve_end is not defined i want to know how can i pass this reserve_end to the datepicker as an string
here is the devtoll picture of tracing
// First component (getting value from Laravel):
export default {
props: ['reserve_end']
}
Now, in the first component, you should have an access to this.reserve_end.
// template of first component
<template>
<second-component :date="reserve_end"></second-component>
</template>
Let's pass the value to another component, using same technique - props.
// Second component (getting value from first component
export default {
props: ['date']
}
Now, in the second, component we can:
{{ date }}, to get the date :)
However, don't forget to inspect each component Vue devtools.
I have a component which I'm trying to make it receive an array.
If I do it like this in a blade file:
<mega-menu :grouped-categories="{{ $categories->toJson() }}"></mega-menu>
It works as intended. It appears in Vue as array.
However, if I try to run some collection methods like 'filter' and 'groupBy' and then apply 'toJson', Vue receives it as an Object which is not what I need.
<mega-menu
:grouped-categories="{{ $categories->filter(function($category) { return $category['enabled']; })->groupBy('group)->toJson() }}">
</mega-menu>
I'm suspicious that something is happening during filtering or grouping that converts it into an array. Any ideas on how to manipulate ´$categories´ variable which is an instance of Collection and make it pass as array to Vue?
According to the information provided by #Vivick, the associative arrays pass to Javascript as Objects. So I'll handle the Object inside the Vue component.
To avoid problems with special chars add addslashes in template like:
:users="'{{ addslashes(\App\Users::all()->toJson()) }}'"
In vue component get the Users as prop:
props: {
users: String
},
And add it to data
data() {
return {
users: JSON.parse(this.mailinglists)
};
},
Hope this helps.
use
v-bind:color="{{json_encode($yourVariable)}}"
in element
for example:
<color-item v-bind:color="{{json_encode($yourVariable)}}" ></color-item>
in your controller:
$myArray = array("name" => "لوازمات");
$item = "لوازمات";
$collection = Color::all();
return view('home', compact('item', 'collection', 'myArray', ...));
in your blade:
#extends('layouts.app', ['item' => $item,'myArray' => $myArray, 'colors'=> $collection])
pass variable into vuejs:
<primary-header
:colors="{{json_encode($colors)}}"
:item="{{json_encode($item)}}"
v-bind:my-array="{{json_encode($myArray)}}">
in your vuejs file
<template>
<div>
{{item}}
{{colors[0].name}}
{{myArray.name}}
</div>
</template>
<script>
export default {
name: "primary-header",
props: {
item: String,
myArray: Object,
colors: Array
},
methods: {
}
};
</script>
<style scoped>
</style>
I'm trying to build a page on Laravel 5.4 which contains few data which needs to be manipulated and then sent across the views. My view contains components of the vuejs v2.0. I want those data to be implemented in the components. I tried using the laracasts PHP Vars to JS transformer but unable to get it. I followed the steps by placing "laracasts/utilities": "~2.0" in my composer.json then I added the serviceprovider as mentioned in the documentation, I published the vendor and added the following in config/javascript.php,
'bind_js_vars_to_this_view' => 'Nitseditor.show',
I'm having a dynamic views folder which is currently inside my Nitseditor\home\resources\views Now in my controller I'm having following codes:
public function show()
{
JavaScript::put([
'foo' => 'bar',
'age' => 29
]);
return view(Nitseditor.show);
}
Now first of all it was throwing an error as I see that it was including use MongoDB\BSON\Javascript; then I removed and tried using use JavaScript
Now in the app.js file which is present in my asset folder, I'm including each components and trying to do console.log(foo); but its throwing an error foo not defined.
There are a few ways to do this depending on what you are trying to achieve and how your project is set up. The simplest way is to make a request to your controller from inside your component that returns json. Laravel 5.4 comes with axios so you can use that:
methods: {
getData(){
axios.get('/controller/route')
.then(response => {
// set your variables from the response
this.myData = response.data;
})
.catch(error => {
console.log(error);
});
},
data(){
return {
myData: {}
}
}
If you need child components to access the data then you would need to put that in the parent and pass myData" using props.
You could also create a directive and pass your variable down directly from your blade template:
Vue.directive('init', {
bind: function(el, binding, vnode) {
vnode.context[binding.arg] = binding.value;
}
});
Then you would just need to do:
<div v-init:vars="{foo: 'foo', age: 29}"></div>
And pass vars as props to any component that needs them:
Here's the JSFiddle: https://jsfiddle.net/3e05qwLh/
If you have multiple descendants that rely on your variables you will probably want to look at using vuex.
Dunno if it helps but I use this method for passing variables to javascript:
// in master layout (head section)
<meta name="foo" content="{{ $foo }}">
// in javascript (included or in the template)
foo = $('meta[name=foo]').attr('content');
If you have javascript in the blade template you can use directly this method:
foo = "{{ $foo }}";