To use VueJS data variables in my hbs view engine I need to add this \ before the variable so it looks like this for example \{{name}} - this would show the name from vue data variable name.
Now I cannot find a way to do this with img src.
<div v-for="item in itemsImgArr">
<img src="{{item.img}}">
\{{item.img}} - returns me a normal img link
</div>
I have tried this option: <img src="\" + "{{ item.img }}"> but it doesn't work. I've tried to experiment but I cannot get the link. Maybe someone could help ?
So if anybody uses Handlebars with VueJS you can show images like this:
<img :src="item.img"> and it works perfectly!
Related
I have, in product-template.liquid
<script src="{{ 'variant.js' | asset_url }}" defer="defer"></script>
And variant.js.liquid is this
alert('{{product.title}}');
But the render of variant.js is
alert('')
Do I need anymore for rendering?
You cannot include a script like that and expect that to be interpreted server side.
Or you do as suggested by Jahanzaib Muneer or you can do like this
<script>
{% render 'variant.js.liquid' %}
</script>
Unfortunately, js files are not supposed to run liquid and "js.liquid" files do not work.
It give us error:
MIME type ('application/x-liquid') is not executable
If you really want to get the liquid variable value in JS then you can use the Shopify Global JS variable.
As per your example:
Add this to your product template:
<script>
Shopify.product_title = '{{ product.title }}';
</script>
In your JS file use this:
console.log(Shopify.product_title);
Hope this will solve your problem.
Thanks
My App.vue has a V-for to create a Card Component, this Card receives the data through a Prop. Everything works fine except for the image.
In my App.vue
<DevJobCard :Job="item" v-for="item in filterSearch" v-bind:key="item.id"/>
The urls that my json provides
"logo": "./assets/logos/scoot.svg",
At the moment the only solution I have found is to put the images in the static folder and use this code so that you can at least see it in production. Help me please :( I haven't made any progress in 2 days
<img v-on="check" :src="'/static' + Job.logo.substring(1)" alt="">
I would like to know how to make it work if they are in assets or in static
If you want to load them by webpack you can simply use :src="require('path/to/file')". Try this code:
<img v-on="check" :src="require('/static' + Job.logo.substring(1))" alt="">
Your project is built, and image paths in the build can change after the build process.
You can try using the require() function. It works at build time:
// v-for="item in yourObject"
<img :src="require('./assets/logos/' + item.logo)" />
This way, webpack will know it needs to change the path to post-build one.
You may want to check this question out: https://stackoverflow.com/a/57350255/1722529
I've been searching this for a while but can't seem to get it right. I have a basic Nuxt project with the following directory structure (ignore the fun.vue) :
The idea is to be able to navigate to a single post with paths like http://localhost:3000/posts/1
This works, if I manually go to .../posts/1 I get my page defined in _id.vue.
The problem is that, in my index page, I cannot get <NuxtLink> to go to single post pages. I have a basic v-for looping over my fetched posts array, like so:
<template>
<div>
<div v-for="post in posts" :key="post.id">
{{ post.title }}
<NuxtLink to="`posts/${post.id}`">Link to post</NuxtLink>
</div>
</div>
</template>
I would expect, upon clicking on the 2nd post's link for example, to navigate to posts/2, but instead I get /%60posts/$%7Bpost.id%7D%60. Why isn't the template string converted normally? I've also tried using a computed value with no success, and the Nuxt Routing docs haven't been of much help.
Highly appreciate any help regarding this.
You forgot the semicolon:
:to="`/posts/${post.id}`"
or even better
:to="{ name: 'post-id' }" // post-id or basically the name you gave to your component
As shown here: https://router.vuejs.org/api/#router-link-props
You can use something like this
the ":" in front of it will make it dynamic and you can use template literals
in between those double quotes
<NuxtLink :to="`posts/${post.id}`">Link to post</NuxtLink>
I tried your code in my development environment. You also may forgot to add "/" in front of "posts":
<NuxtLink :to="`/posts/${post.id}`">Link to post</NuxtLink>
If you put your code without "/" in a Nuxt "layout", it adds "posts" iteratively to your "URL" and makes the destination wrong:
http://localhost:3000/posts/posts/2
This happens when you click on post 1 and after to post 2.
I have a card component which has a structure for an image like this. One image can't be loaded because of (HTTP Status: 403). So I want to replace it with a default one. So I looked it up and learn that I can use #error.
<div class="card-thumbnail">
<img
:src="cardImage"
alt=""
#error="$event.target.src = '~/assets/images/error.jpeg'"
/>
</div>
However this code gives me error that "error.jpeg" can not be found. My folder structure is correct because without #error and a src like this:
src="~/assets/images/error.jpeg"
I can actually see my error.jpeg. So what I am doing wrong here ?
Based on this you need to use require because images inside assets directory are considered as modules :
#error="$event.target.src = require('~/assets/images/error.jpeg')"
I'm trying to add some comments box to a specific page of my website
but I met some trouble
using smarty I've seen in the documentation that in order to get the current url we should use that synthax {$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}
that's actualy what I did putting that code in my tpl.
{literal}
<div id="fcbcfooter"><div data-href="http://{$smarty.server.HTTP_HOST}
{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}" class="fb-
comments" data-width="500px;" data-num-posts="10" data-
colorscheme="light"></div>
{/literal}
The trouble I have is that it return to me that message
href URL is not properly formatted
The code for getting url does not seems to be interpreted in the source code.
anykind of help will be much appreciated.
You are missing a closing </div> at the end of your code block right before the {/literal} tag.
{literal}
<div id="fcbcfooter">
<div data-href="http://{/literal}{$smarty.server.HTTP_HOST}
{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}{literal}" class="fb-comments" data-width="500px;" data-num-posts="10" data-colorscheme="light"></div>
</div>
{/literal}