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
Related
I am trying to concatenate a Vue variable with an id in querySelector, and for some reason it is not targeting any element.
I am currently using:
document.querySelectorAll(".container:not(#`${this.id}`"));
this.id is just a string, and doesn't include the '#', which is why I am adding it to the querySelector here
What I have in the DOM is:
<div id="header-1" class="container">
.......
</div>
<div id="header-2" class="container">
.......
</div>
<div id="header-3" class="container">
.......
</div>
You should look at using 'refs' to select a DOM directly instead of native javascript and CSS selectors.
For example this.$refs[this.id]
https://v2.vuejs.org/v2/api/#ref
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":
I have a responsive-menu component which I want to use named slots inside of this up my template markup:
<template>
<div class="responsive-menu">
<div class="menu-header">
<slot name="header"></slot>
</div>
</div>
</template>
Whenever I try my named slot like this it work perfectly fine:
<responsive-menu>
<h3 slot="header">Responsive menu header</h3>
</responsive-menu>
However as soon as I wrap it with a class nothing shows up anymore.
<responsive-menu>
<div class="container">
<h3 slot="header">Responsive menu header</h3>
</div>
</responsive-menu>
What is going on here? Shouldn't I just be able to wrap the named component? Which does it appear that my named slots need to be direct children of my Vue component?
It does not work because your "wrapped slot" isn't direct child of responsive-menu tag.
try something like that:
<responsive-menu>
<div class="container" slot="header">
<h3>Responsive menu header</h3>
</div>
</responsive-menu>
jsfiddle
It works with Vue >= 2.6. Just upgrade vue and vue-template-compiler.
I am trying to reference a v-model in one of my html files.
I've gone ahead and created a jsbin with a small example of what I'm trying to achieve:
https://jsbin.com/saqirekasa/edit?html,js,output
Essentially, what seems to be happening is that Vue gives an error like this in my actual project:
[Vue warn]: Invalid expression. Generated function body: scope.lookForUser({{scope.input_field}})
The problem (I believe) appears to be when I introduced this line:
<input type="text" class="form-control input-lg" placeholder="email-address" id = "button_email_submit" v-model = "input_field"/>
And then tried to reference the v-model 'input field' as such:
<button class="btn btn-info btn-lg" type="button" v-on= "click: lookForUser(#{{input_field}})">
Any ideas why Vue doesn't like this statement?
I figured this out with a bit more fiddling around -- the issue was I was not supposed to use #{{input_field}} but rather simply pass input_field text into the arguments.
Thanks! Here's my example code in case it helps anyone.
<div v-repeat="company: companies">
<div class="col-xs-12 col-md-6 col-lg-6">
<a href="#" v-on="click: selected_company_id = company.id">
</div>
</div>
I kept wanting to wrap the company.id in mustache brackets:
<a href="#" v-on="click: selected_company_id = {{company.id}}">
but I'm assuming that since it is already part of an expression, you don't need to do that.
I have a dijit that looks fine as far as I can tell, but it is raising Uncaught Error: Invalid template every time. I have not been able to figure out why. All variables (e.g. ${variableName} are defined in the widget correctly.
Here is the widget:
<div class="${classPrefix}-wrapper">
<div class="${classPrefix} flair" dojoAttachPoint="flairNode"></div>
<div class="${classPrefix}-count hidden" dojoAttachPoint="countWrapperNode">
<div class="count" dojoAttachPoint="countNode">0</div>
</div>
<div class="${classPrefix} ${secondaryClass} action hidden" dojoAttachPoint="secondaryClickNode" dojoAttachEvent="onclick:_onSecondaryClick">
<div class="${classPrefix}-inner"></div>
<div class="${classPrefix}-icon"></div>
</div>
<div class="${classPrefix} ${primaryClass} action" dojoAttachPoint="primaryClickNode" dojoAttachEvent="onclick:_onPrimaryClick">
<div class="${classPrefix}-inner"></div>
<div class="${classPrefix}-icon"></div>
</div>
<div class="${classPrefix}-message hidden" dojoAttachPoint="messageNode"></div>
</div>
<div class="${actionPromptNodeClass}" dojoAttachPoint="actionPromptMessageNode">
<span dojoAttachPoint="actionPromptMessage">${actionPromptText}</span>
<span dojoAttachPoint="actionCompletedMessage" class="hidden">${actionCompletedText</span>
</div>
Found the answer to my question. It turns out that you can only have one root node in a Dijit. I missed this in the docs, but it is at the bottom of this tutorial:
Common Pitfalls
Be sure to only have one root node in your template
Don’t start or end your template with a comment because that means you technically have two nodes
Avoid a trailing </div> at the end of your template
There may be only one root element in the template. Wrap your template into <div></div> and it should work.