is there a way to get the base asset url in a Shopify liquid theme?
I'm translating a page to Shopify. This page uses Vuejs data binding like so:
<img src="/path/to/assets/folder/{{ color }}1.jpg">
I can't pass the curly braces to the filter because it will URL encode it. If I had access to the asset url it would be simple.
Any ideas?
You can escape liquid templates, so your tag would be like this
<img src="/path/to/assets/folder/{{ "{{ color " }}}}1.jpg">
not nice if you ask me. But there is another option, use vue bind instead of text interpolation, so there is no curly braces, when you use the v-bind directive, then you write pure javascript for that directive, so you quote your src attribute, or add it to a variable of your component.
usign the text
<img :src=" '/path/to/assets/folder/' + color + '1.jpg' ">
usign a variable
<!-- template -->
<img :src="img_path">
// js, data or props attribute
img_path: '/path/to/assets/folder/' + color + '1.jpg'
note: I used the shorthand version of v-bind:src => :src
Related
ESRI's JS API seems to be stripping out the hrefs of URLs.
Here I set up a static link. Then I attempt to put it in the description. The link text and target="blank" are rendered but the link's href (test/) is blank!
{% for project in projects %}
var link = "<a target='blank' href='test'>Legal Description</a>";
console.log(link) // This prints as expected with href intact.
var attributes = {
Name: "{{project.description}}",
Description: link // strips out the href?!?!?!?!
}
It SHOULD be localhost:8000/projects/test but there is no test href.
The arcgis-js-api sanitizes html content in popups for security reasons. I'm not sure how you're defining your popups or using the attributes variable, but you'll want to create a PopupTemplate, and its its content property to do what you want. You can do it like the linked article recommends, or you can use a CustomContent instance for the popupTemplate content property.
I have a string that contains some HTML markup.
I would like to pass this into a component's slot.
This component is used elsewhere with regular html markup between the opening and closing tags, and works as expected.
The issues are that mustache syntax outputs escaped HTML, {{myFormattedText}} becomes literally Some line of <span>text with formatting</span> that is passed in from somewhere else which is not what we want.
Passing it in the v-html="myFormattedText" attribute on the component replaces all content inside the component tags with the variable string.
Is there a way to do this? I'd like to reuse this component, for visual consistency reasons, but the content that we receive for it is disparate and varies widely based on the view or source.
Test string:
myFormattedText = "Some line of <span>text with formatting</span> that is passed in from somewhere else";
Component:
<template>
<div class="doing-a-thing">
<h2>Some text</h2>
<div class="thing">Random stuff</div>
<slot></slot>
</div>
</template>
Attempts:
<mycomponent>{{myFormattedText}}</mycomponent>
<mycomponent v-html="myFormattedText"></mycomponent>
Just put the v-html render on an element inside the component tags and it'll get rendered correctly and passed in.
<mycomponent><div v-html="myFormattedText"></div></mycomponent>
Again, moments after posting, it hits me like a bolt of lightning...
<template>
<div>
<span>foo</span> <!-- unwanted space here -->
<span>bar</span>
<span>foo</span>
</div>
</template>
// But I don't want to do this
<template>
<div>
<span>
foo
</span><span> <!-- bad coding style -->
bar
</span><span>
baz
</span>
</div>
</template>
In html, newlines between elements are rendered as spaces, and Vue followed that behavior. If I want no spaces between the elements, the obvious way is to put no space there, as shown in the code sample. But it is ugly, I don't want that. How can I do otherwise such that there is no space between the elements?
You can change the compiler options.
compilerOptions
type: Object
default: {}
Options for the template compiler. When using the default vue-template-compiler, you can use this option to add custom compiler directives, modules, or discard whitespaces between template tags with { preserveWhitespace: false }.
However the documentation states this only applies to single file components and template tags. I don't think there is currently any option for native tags and related issue has been closed. But maybe it gives you the desired result.
I'm trying to make a blog using Vue as laid out in the excellent demo here. I'd like to include some mathematical formulas and equations in my blog, so I thought I'd try to use vue-katex. vue-katex formats my mathematical notation perfectly when I put all my KaTeX HTML directly into my Vue templates, but to create a useable blog I need to keep my content separate from my templates (as shown in the demo).
I can't get vue-katex to format HTML content in the static folder. That's what I'd like help with.
Setup
I cloned the github repo for the demo.
I added vue-katex to package.json:
"vue-katex": "^0.1.2",
I added the KaTeX CSS to index.html:
<!-- KaTeX styles -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.css"
integrity="sha384-exe4Ak6B0EoJI0ogGxjJ8rn+RN3ftPnEQrGwX59KTCl5ybGzvHGKjhPKk/KC3abb"
crossorigin="anonymous"
>
I added the import statement to src/App.vue:
import Vue from 'vue'
import VueKatex from 'vue-katex'
Vue.use(VueKatex)
and I added a simple line of HTML with KaTeX to the BlogPost template:
<p>Here's an equation in the actual Vue template: <div class="equation" v-katex="'X \\sim N(\\mu, \\sigma^2)'"></div></p>
As I said, this works - I see formatted mathematical notation in my blog post (URL http://localhost:8080/read/neque-libero-convallis-eget):
However, I need different equations for every blog post, of course.
So I tried adding KaTeX HTML to the "content" field in the JSON for the first blog post: static/api/post/neque-libero-convallis-eget.json. I changed the "content" line to:
"content": "Here's an equation in the static folder: <div class=\"equation\" v-katex=\"'X \\sim N(\\mu, \\sigma^2)'\"></div>",
This content appears on the page, but the equation doesn't render. I see this: (the text appears but no equation is shown)
When I use Developer Tools to inspect the HTML on the page, I see this:
You can see that vue-katex has been applied to the equation I put in the template directly: it has parsed the HTML I typed into lots of spans with all the mathematical symbols, which are showing perfectly.
However the KaTeX HTML I've added to the "content" in the static folder has simply been placed on the page exactly as I typed it, and is therefore not showing up as an equation on the page. I really need to keep my blog post content in this static folder - I don't want to have to create a different .vue file for each blog post, that defeats the point!
My question is: is there a way to manually "apply" vue-katex to the HTML I place in the static folder, when it loads? Perhaps there is something I can add to the plugins/resource/index.js file, since this contains the function that loads the data from the static folder?
Many thanks in advance for any help.
*Disclaimer: I'm definitely no expert / authority on what I'm about to explain!
One thing to remember is that Vue reads the templates you write, and then replaces them as reactive components. This means that although you often write Vue attributes like v-for, v-html or in this case v-katex these attributes are only useful up until the app or component is mounted.
With this in mind, if you have a Vue app that ajax loads some html, its not going to be able to rerender itself with those Vue bindings in place.
I have somewhat ignored your current set up and set about solving the issue in another way.
Step 1: Reformat your data from the server side
I've put the posts into an array, and each post contains the template (just a string of html) and the equations separately as an array. I've used [e1] in the post as a placeholder for where the katex will go.
var postsFromServer = [{
content : `<div>
<h2>Crazy equation</h2>
<p>Look here!</p>
[e1]
</div>`,
equations : [
{
key : 'e1',
value : "c = \\pm\\sqrt{a^2 + b^2}"
}
]
}];
Step 2: When the post is rendered, do some work on it
Rather than just use v-html="post.content", I've wrapped the html output in a method
<div id="app">
<div v-for="post in posts" v-html="parsePostContent(post)">
</div>
</div>
Step 3: Create a method that renders all the katex, and then replaces the placeholders in the post
methods : {
parsePostContent(post){
// Loop through every equation that we have in our post from the server
for(var e = 0; e < post.equations.length; e++){
// Get the raw katex text
var equation = post.equations[e].value;
// Get the placeholder i.e. e1
var position = post.equations[e].key;
// Replace [e1] in the post content with the rendered katex
post.content = post.content.replace("[" + position + "]", katex.renderToString(equation));
}
// Return
return post.content;
}
}
Here is the whole set up, which renders Katex:
https://codepen.io/EightArmsHQ/pen/qxzEQP?editors=1010
I have an app that has components nested inside. The app is called on the filter id. I have a data element named minTotalSpent. Currently, this contains "3" in the app. The first placement on the page displays appropriately. When I try to pass it in as a variable into vue-slider, however, it does not like it and throws an "invalid expression"warning on the counsel and does not respect the minimum.
<div id="filter">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
{{minTotalSpent}}
<div class="filter-container-slider">
<vue-slider
:min="{{minTotalSpent}}"
:max="42"
:value="2"
>
Just elaborating as per #thanksd's answer.
When using any component, over here vue-slider component, if you use v-min = "..." or :min = "...", the value of v-min or :min is in a javascript expression and you cannot use mustaches inside javascript expression.
And when it comes to html attributes like id on any element, you should be using v-bind.
<div v-bind:id="dynamicId"></div>
Read more about them here: https://v2.vuejs.org/v2/guide/syntax.html#Attributes