how to use id in components, the code as below:
The components code as below:Profilelist.js
<template>
<div class="col col-m-12 col-t-6 col-d-6 box-item f-software">
<div class="item animated">
<div class="desc">
<div class="image">
<a href="#popup-{{id}}" class="has-
popup"><img src="{{workpic}}" alt="" /></a>
</div>
<div class="category">{{category}}</div>
<div class="name">
<a href="#popup-{{id}}" class="has-
popup">{{project_name}}</a>
</div>
</div>
</div>
<div id="popup-{{id}}" class="popup-box mfp-fade mfp-hide">
<div class="content">
<div class="image">
<img src="{{workpic}}" alt="">
</div>
<div class="desc">
<div class="category">{{category}}</div>
<h4>{{project_name}}</h4>
<p>
{{project_content}}。
</p>
<a href="{{project_link}}"
class="btn">View Project</a>
</div>
</div>
</div>
</div>
</template>
The index file code as below:
<div class="row box-items">
<ProfileList
v-for="profile in loadedProfiles"
:key="profile.id"
v-bind:id="profile.id"
:workpic="profile.workpic"
:category="profile.category"
:project_name="profile.project_name"
:project_content="profile.project_content"
v-bind:project_link="profile.project_link"
/>
</div>
And it outcome an error code as below:
href="#popup-{{id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
src="{{workpic}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
href="#popup-{{id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
id="popup-{{id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
src="{{workpic}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
href="{{project_link}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .
You have to bind the data to your attributes and do the proper concatenation using template literals, replace your attributes following the examples
:href="`#popup-${id}`"
:src="workpic"
:id="`popup-${id}`"
:href="project_link":
Related
I am trying to add a href link with a variable in my vue template, for some reason it keeps breaking and I have no clue why, it's trying to reference it as a variable rather than a link. the issue is with the "/post/update" href. the "/view-user/ + post.user.id" works fine
<template>
<div id="content">
<div class="post">
<h3>{{post.title}}</h3>
<p>{{post.content}}</p>
<a :href="/view-user/ + post.user.id">
{{post.user.username}}
</a>
<p>{{ post.created_at.split(".")[0] }}</p>
<a :href="/post/update/ + post.id">Edit</a>
</div>
<hr>
<comment :id="id"/>
</div>
The static part of the href value should be wrapped by '' as string :
<a :href="'/view-user/' + post.user.id">
or string template :
<a :href="`/view-user/${post.user.id}`">
in your case it's evaluated as expression.
I want to find and replace some child tags that are nested inside parent tag.
Here is my template:
<$tag$ $attribute$=$value$>
<$childTag$ $childAttr$=$childValue$ />
<$tag$/>
I apply text filtering via regex to $value$ and to $childValue$:
$value$ filter is .*sm-landing-appstore-app-1-gallery--main.*
$childValue$ filter is sm-landing-appstore-app-1-gallery__slide-img
And this is a part of an HTML document where I want to find my sm-landing-appstore-app-1-gallery__slide-img and replace it:
<div class="sm-landing-appstore-app-1-gallery__main-gallery">
<div class="sm-landing-appstore-app-1-gallery__main-gallery-frame-wr swiper-container">
<div class="sm-landing-appstore-app-1-gallery__frame sm-landing-appstore-app-1-gallery__main-gallery-frame swiper-wrapper">
<div class="sm-landing-appstore-app-1-gallery__slide sm-landing-appstore-app-1-gallery__main-gallery-slide sm-landing-appstore-app-1-gallery__main-gallery-slide--screenshot swiper-slide"
data-index="0" data-id="0">
<div id="cmp-6" class="sm-ratio sm-landing-appstore-app-1-gallery__slide-in">
<div class="sm-ratio__placeholder"></div>
<div class="sm-ratio__body">
<div class="sm-landing-appstore-app-1-gallery__slide-cv"><img
class="sm-landing-appstore-app-1-gallery__slide-img"
src="img/Fitness%20Buddy/1.jpg" alt="EasyFitness gallery 1" data-number-image="1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
But the syntax of my search template is incorrect.
Is finding of nested tags even possible with IntelliJ structural search?
Thymeleaf th:attr not working with Vue bind property
<truncate th:attr="'v-bind:text'=${message}"/>
The above line not giving me error in both Vue and Thymeleaf but nothing display on page
below is the response from server side
Once I remove 'v-bind:' prefix and use some thing like "th:attr="text=${user.comment}" its working as expected
<div class="col-lg-12 col-sm-12 col-xs-12 row_block_padding" th:each="user : ${response.users}">
<!-- OTHER CODE -->
<div class="col-lg-10 col-sm-10 col-xs-10" style="padding-top: 15px;">
<truncate th:attr="text=${user.comment}"></truncate>
</div>
</div>
You'll need to use the th:attr directive. For example
<div th:with="message='Simple message'">
<truncate th:attr="'v-bind:text'=${message}"/>
</div>
See https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-the-value-of-any-attribute
Update: to use th:attr with HTML5 invalid attributes (like v-bind:text), you need to quote the attribute name (fixed above).
This produces the following markup
<div>
<truncate v-bind:text="Simple Message"/>
</div>
You may note that this is not a valid Vue binding expression so perhaps you don't actually want to use binding and instead use
<truncate th:attr="text=${message}"/>
which would produce
<truncate text="Simple message"/>
<truncate th:attr="'v-bind='{text:'+${message}+'}'"/>
the solution of vue: another usage of v-bind
https://v2.vuejs.org/v2/api/#v-bind
Is it possible to just render once into an element?
Suppose I have a contenteditable div, and only want to render the first value, then stop rerendering as the model changes. Here only the initial value of variable will be rendered.
<div contenteditable="true"> {{variable}} </div>
Use v-once
<div contenteditable="true" v-once> {{variable}} </div>
You can also wrap it with a <span>:
<div contenteditable="true">
<span v-once> {{variable}} </span>
</div>
refs:
https://v2.vuejs.org/v2/guide/components.html#Cheap-Static-Components-with-v-once
https://v2.vuejs.org/v2/api/#v-once
Or another solution is simply clone the variable and just don't modify it, for example if you call it readOnlyVariable:
<div contenteditable="true"> {{readOnlyVariable}} </div>
When nesting repeat.for in Aurelia, an internal repeat.for does not have access to the variable used in it's parent repeat.for.
Example
<div repeat.for="x of 8">
<div repeat.for="y of 8">
${x} - ${y}
</div>
</div>
In the above example, ${x} does not emit anything. How do you get the x value when inside the internal repeat.for?
Found my answer. You need to do the following:
<div repeat.for="x of 8">
<div repeat.for="y of 8">
${$parent.x} - ${y}
</div>
</div>