I am actually building a SPA with foalts.org.
I have placed my script.js inside the public folder. Unfortunately, this doesn't allow me to use typescript for my vue-js. Maybe someone has an idea for this, cause actually the public folder got served from foalTS framework. But this is actually not the main topic.
The maintopic is, that i want to list several divs with
<div class="row-position" v-for="order in orders" :key="order.latestPrice">
<div id="myAMchart></div>
</div>
Now I would like to be able to place an amChart (https://www.amcharts.com/) for each div. And I want that these charts follow the value of order.latestPrice. But I actually have no idea how to set up this with amCharts and vue.js
Im open to any ideas.
I was able to update one single chart but with a fixed id of the div.
I don't know how to connect the many different (dynamicaly generated) charts to the order.latestPrice field.
Thanks!
Related
On _collection.vue I have something like
<div>
This is a collection
<NuxtChild />
</div>
And inside of category > index.vue I have content like
<div>
This is a Bicycle Page
</div>
If I go to http://localhost:3000/collection/bicycle
It will only show This is a Bicycle page but it will not show the parent layout.
What am I doing wrong?
Isn't _collection.vue the parent of anything inside of the _category folder? Shouldn't everything _collection.vue show in addition to the child components?
Here _category and _collection are at the same level, so it's basically one of them.
You cannot have 2 variables at the same time, it's like asking: "what is my variable: X or Y?".
You can have only 1 dynamic page, especially at the same level. If you want to have /collection/bicycle, then collection directory and _type.vue (for bicycle) inside of it should be enough.
I think you have mixed up the concepts of pages, components and layouts here.
If you are trying to set up a layout that is applied to each page in pages/collection, you could make use of an actual layout.
If you are trying to display a particular piece of content on multiple pages, you should use components.
Further information around nested route handling.
Just change a _collection.vue to index.vue If you want to have collection path as dynamic value, change folder name to _collection. And as kissu wrote you in a comment, you have two routes at the same level, so it reads just one. All you need to do is change _collection.vue file name if you don't need a flexible route.
I have a website consisting of a Sitemap like this:
Home
About
Golf
-- Course one
-- Course two
Work
-- Work one
-- Work two
Contact
So Work.vue is laid out like this
<header></header>
<carousel></carousel>
<work-one</work-one>
<work-two></work-two>
<footer></footer>
My question in my main navigation above if I click the sub navigation item Work two how I then go to the Work page and scroll to the Work two component or even better if the work two component would load first and the work one component would load under it.
Really hope I am making sense but basically I want to be able to link to specific parts of a vue Page component which contains other components also.
Thanks
If I understand you correctly, this doesn't really have much to do with Vue or Vue router as it does simple html.
You can use anchor tags for this (http://www.echoecho.com/htmllinks08.htm):
Simply put, in each components html have something like
<a name="work-one"></a>
Then, when you want to link to that specific component on that page, you can do:
Link Text
Or the Vue Router way:
<router-link to="yoursite.com/your-main-page-link#work-one">Link Text</router-link>
So basically, when using components - the app root passed to the Vue instance gets replaced by whatever HTML is in the component. Is there a way to disable this and just nest the stuff Vue renders inside the app root instead?
for example - if index.html has a wrapper of
<div id="myVueApp"></div>
and I set el: "#myVueApp" on the Vue instance, the whole node will get removed and replaced by whatever I have in my template resulting in
<div id="myComponent">...</div>
Is there a way to make it into
<div id="myVueApp">
<div id="myComponent">...</div>
</div>
Should work. From what I understand, you want to have multiple parts of your Vue app to be splitted up in the rendered HTML output as well, more specifically into multiple divs.
I think this should work if you use multiple Vue instances.
Set up a structure in your HTML file and give them appropriate id's.
Then, create the Vue instances you want and assign each of them to their specific div using el.
However, I can't tell you if this is a good idea and follows the best practice..
Hope this helps!
I have come to a road block in my search to the answer to using custom fields in templates.
I have tried adding
%%SNIPPET_ProductCustomFields%%
in the ProductDescription.html but nothing shows.
Is there ANY documentation about this?
Can this snippet be used in certain places only? if so which ones?
What needs to be in place for this to display in the products description?
Any help, tips or pointers would be great.
The CustomFields Snippet, %%SNIPPET_ProductCustomFields%%, can only be used if being referenced through its own Panel.
By default, the Panel that calls this snippet is named %%Panel.ProductOtherDetails%%
You can also create your own custom Panels by uploading them to the Panels folder via WebDav.
For example, if you created a template file called CustomFieldsPanel.html, you would upload it to the /dav/template/Panels folder, and reference it in your theme by %%Panel.CustomFieldsPanel%%
To answer your question though, you can do one of the following to display Custom Fields in the Product Description:
Insert it into ProductDescription.html via its default Panel - %%Panel.ProductOtherDetails%% - modifying it by editing the template file ProductOtherDetails.html
Create your own custom panel, include the Snippet within that same custom panel, and insert it into ProductDescription.html by the custom panel's name. An example of that file might look like so:
<!--
* /dav/template/Panels/MyCustomFieldsPanel.html
* %%Panel.MyCustomFieldsPanel%%
-->
<div id="MyCustomFieldsPanel">
<h1> Custom Fields Below </h1>
%%SNIPPET_ProductCustomFields%%
</div>
Hope this helps :-)
I have an Aurelia application in which I'm trying to build a CMS component. This component will load data from the server and this data mainly contains slug, title and content fields.
I also have several global components defined in my application, and I want to be able to use those components in the server so when I pull that data my CMS component is able to transform/compile those custom elements.
An example would be a tab component. I have the tab component with this structure defined:
<tab-panel>
<tab title="First"></tab>
<tab title="Second"></tab>
</tab-panel>
The CMS component will contain a content property which I use to pass a string like this: '<tab-panel><tab title="First"></tab><tab title="Second"></tab></tab-panel>'
The component needs to compile that string and render it in its view. I've checked the enhance API, but it doesn't worked, at least for me. Any other suggestion to dynamically compile/render custom elements??
Thanks a lot in advance.
I've found the solution. I've used a compose element and InlineViewStrategy and it worked well, the components are shows and binding works as expected.
If your custom elements are registered globally using globalResources you can actually using the TemplatingEngine to dynamically insert content into the DOM and then compile it after-the-fact. This blog post goes into detail in how you can do it.
However, I would use this as a last resort. As is mostly always the case, there are much better ways to do something in Aurelia. Using the <compose> element is a great way to dynamically render content in your Aurelia applications and should always be the first port of call.