I'm trying to get the data "course_name" from a component view.
I have a component . This component comes from element-ui.
In my component, I have an event object that contains thecourse_name data.
I would like to use the name of the event to use it as a title. I can not access it. I tried by doing in my file "header.blade.php":
<el-header>
#{{ event.course_name }}
</el-header>
but I get an error :
Property or method "event" is not defined on the instance but referenced during render.
How to access the title of the event?
Thank you very much
Related
There is an existing Livewire component and its corresponding blade file in the code structure.I want to create a new Laravel Controller and blade file.The blade files include variables that are defined in the Livewire component so when I return the newly created blade file from the new Laravel controller it shows undefined variable error.Is there any way to pass the variables defined in Livewire component in the newly created blade file?Also is there any alternative to this approach?
This is the blade file and the variable.
#if($variable)
#endif
This variable is defined the livewire component.
public $variable=false;
And the newly created controller is returning the above mentioned blade file.
Well I can't give you any definite answer because no code was posted and I don't know what your aim is
But if you really do need to pass variables to the new blade file, you can look into livewire browser events
https://laravel-livewire.com/docs/2.x/events
You can dispatch a browser event in the child component and listen for it in the parent
I once did this in a project of mine
$this->dispatchBrowserEvent('nationality-updated',['nationality' => $this->nationality]);
$this->dispatchBrowserEvent('state-updated',['state' => $this->state]);
And I listened to it in a parent component like this
<script>
window.addEventListener('nationality-updated',event => {
#this.set('state.nationality', event.detail.nationality)
})
window.addEventListener('state-updated',event => {
#this.set('state.state', event.detail.state)
})
</script>
Note that state.nationality is a livewire variable I accessed from Javascript and I'm not quite sure if that is optimal
But if you must you can follow the above
I'm using Laravel Nova, and I want to make "Save" button(on the Update view) unavailable while all required fields are empty.
Here's the part of the code of the "Update.vue" file that creates my form fields:
<div v-for="field in fields">
<component
#file-deleted="updateLastRetrievedAtTimestamp"
:is="'form-' + field.component"
:errors="validationErrors"
:resource-id="resourceId"
:resource-name="resourceName"
:field="field"
/></div>
Fields array fills with the data from backend.
So I can see this structure in the Vue dev tool. And when I change the input value it changes value of <form-text-field>, but I don't see this changes anywhere in my Update component.
So my question is - How I can get changes of my input fields dynamically?
In Vue data flows only one way, so the change of data in your Update component will be reflected on form-text-field, but not the other way around. To create 2-way data binding you should use v-model.
I suppose form-text-field is one of your custom components, in that case you should create a custom v-model for it. See: Customizing Component v-model
If you can't get it work post your implementation of form-text-field here, so we can help.
I am trying to attach change event handler to the instance of kendoNumercTextBox.
I am able to get the instance of kendoNumercTextBox control using its ID, however Im not able to get the instance using class name
here is the code http://dojo.telerik.com/emIWa/11
NOTE
I DO NOT want to attach event handler at the time of instantiating
the control. I want to get the existing instance and then attach the
event handler.
Also i am actually using Kendo ASP.NET MVC, however
dojo doesn't allow me to write cshtml so i am using kendo UI for
the demo purpose above. But i think end result would be same.
The NumericTextBox is created like below in cshtml
#(Html.Kendo().NumericTextBoxFor(x =>x.numerictextbox).HtmlAttributes(new {#class = "MyClass"}))
You need to use a more specific jQuery selector. This for example will get the correct element which is the one with the data-role attribute:
var numerictextboxByClassName = $(".MyClass [data-role]")
If you use the developer tools in your browser to inspect the text box, you'll see that 'MyClass' is on several elements that comprise the widget, hence the need to be more specific. It is also worth noting that the handler will only attach to the first instance found using the selector so this method cannot be used to attach a handler to several such controls at the same time.
I've created a sandbox with a demonstration of binding UI components to both data and state: http://dojo-sandbox.net/public/51073/1
It's my plan to generate code from a page definition creating a page-level widget which is templated. This widget will have its own scope, where the model and state will reside, which I am trying to simulate in the sandbox by way of the Page object.
The sandbox is working because the Page object is in the global state, which appears to be the default context for object resolution in mvc binding.
However the plan is to have a view widget supporting each page with both the Model and State contained within the widget's scope. The generated template for the view would be bound to both the Model and the State. I can establish the source via the 'target' property, but when the same UI component must be bound to two different models, one for value and one for state, the single source doesn't support this.
The Model data will come to me from the back-end, and the State data is derived via the State.Execute method once the Model data is present.
I've taken a look at the 'rel:' parameter of at(), but don't see how to leverage this syntax within a specific context, ie my view widget's scope. It seems to be working fine for the default global scope.
Is there a standard way to direct the data-dojo-props value binding at one source, and the data-mvc-bindings for attributes at another? Or, more precisely, what is the at('rel:') syntax which will support specifying the context of the relation, and not rely on the 'target' of the widget or containing widget?
If there is no way to specify the 'target' at this level, I will generate more logic in the Execute method to specifically set the html attribute on the component during state compilation.
data-mvc-bindings is for allowing non-widgets use dojox/mvc/at. If a widget is declared for an element data-dojo-props is the one for use instead.
If target is specified via data-dojo-props or data-mvc-bindings, it’ll be set eventually to the widget.target. ”rel:” syntax looks for a widget having .target up in DOM tree.
It means that one “group” cannot have more than one "relative binding target”, in case it’s one of your questions. You can have a “scope object” that contains pointers to more than one models and use it as a “relative binding target”, that may serve a similar purpose:
<div data-dojo-type="dijit/_WidgetBase"
data-dojo-props="target: {model0: model0, model1: model1}">
<input type="text"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:model0', 'value'),
disabled: at('rel:model1', 'disabled')" />
</div>
A working example can be found at http://jsfiddle.net/asudoh/M3bRC/. Hope these help.
Best, - Akira
Currently i'm retrieving data from my database which is stored in a datagrid. I created a new column which uses an ItemRenderer and inside this I want to show a facebook profile image. I have not stored these inside my database because they can be accessed publicly. I have my user's facebook ID's, so I was hoping to bind this data with the required URL to display the correct image.
I have tried both of the following:
<s:Image id="fbImg" source="http://graph.facebook.com/{getUserResult.lastResult.facebookid}/picture?type=normal"/>
and
<s:Image id="fbImg" source="{'http://graph.facebook.com/' + getUserResult.lastResult.facebookid + '/picture?type=normal'}"/>
I'm getting a 1120 error (access of undefined property) but i'm not sure why. My datagrid is populated using <s:AsyncListView list="{getUserResult.lastResult}"/> and I can manage to pull other data from the getUserResult.lastResult.databasefield commands, but not to display an image. The getUserResult refers to a the result of a php function that is called to retrieve data from the database.
Any help is greatly appreciated. Thankyou.
Most likely your itemRenderer does not have access to the getUserResult service; and that is why you're getting an error that says you're accessing an undefined property.
In the itemRenderer you must use the data property to access the element of your dataProvider that your renderer is attempting to display.
So, most likely you want to do something like this:
<s:Image id="fbImg" source="http://graph.facebook.com/{data.facebookid}/picture?type=normal"/>
However, I strongly advise against using Binding inside an itemRenderer. Instead, modify the image's source property in a dataChange event handler (my preference) or by overriding the set data method. Here are a bunch of links about itemRenderers that may help;
override public function set data(value:Object):void {
if (value != null) {
super.data = value;
this.fbImg.source = "http://graph.facebook.com/" + value.facebookId + "/picture?type=normal value.facebookid";
}
<s:Image id="fbImg" />