I migrate to Vue3 and I got this Vue warn, I don't really understand how to solve it.
That happend when I use el-button of element-plus library.
enter image description here
The code:
<div>
<el-button
style="font-size: 30px"
class="element-btn"
type="primary"
circle
#click="buttonsController('add-button')"
>
<div>
<el-icon :size="30"><Plus /></el-icon>
<p style="margin-top: 15px">Add</p>
<p style="margin-top: -10px">Dates</p>
</div>
</el-button>
</div>
There is a breaking change in Vue 3 that is mentioned in the migration guide (point 2 in the overview).
BREAKING: No longer removes attribute if the value is boolean false. Instead, it's set as attr="false". To remove the attribute, use null or undefined.
If you want to get rid of the warning, you should set the attribute value to null or undefined instead of false. Otherwise vue will apply the attribute with false instead of removing it.
Example
<!--
if your variable contains `true` or `false`
you need to make sure, the false case is
passed as `null` or `undefined` to the attribute binding.
-->
<div :aria-disabled="myVariable || null"></div>
Related
I want to show a translation on the title of a component.
Here is the HTML code:
<user-card
:totalUser="totalUsers"
color="primary"
icon="UserIcon"
user-title="Total users"
/>
On my user-card component I have this:
<b-card class="text-center">
<b-avatar
:variant="`light-${color}`"
class="mb-1"
size="45"
>
<feather-icon
:icon="icon"
size="21"
/>
</b-avatar>
<div class="truncate">
<h2 class="mb-25 font-weight-bolder">
{{ totalUser}}
</h2>
<span>{{ user-title }}</span>
</div>
</b-card>
And to use translation I have this syntax where I get the translated terms from the JSON file:
{{$t("Total users")}}
How can I implement this on the user-title?
Have a look at this, I have tried to replicate your scenario in code sandbox.
sample app
What you are doing wrong is that $t is a function that accepts variable name which has an actual message in it, first you have to define a variable e.g totalUserTitle: 'Total users' for multiple languages like I did in index.js, and then you can use it as $t(totalUserTitle).
Just use v-bind and pass the expression to your user-card component directly:
<user-card
...
:user-title="$t('Total users')"
/>
You're actually already using this syntax in multiple places, this directive just tells Vue to "dynamically bind one or more attributes, or a component prop to an expression", which is exactly what you're looking for here.
This will evaluate $t('Total users') as an expression and then pass the result to your component as a prop.
In my example I want to draw a border around an element after clicking on it. In this example it works perfectly:
<div v-for="(parent, index) in $store.getters.getInfo" :key="index">
<div #click="setClicked" :id="child.id" v-for="child in parent"
:style="[child.clicked ? {'border-color': 'black'} : {'border-color': 'white'}]">
</div>
</div>
But when i try with a bit more complicated structure and template tags the style binding fails to be triggered:
<div v-for="i in 12">
<template v-for="(user, index) in $store.getters.getSharedUsers">
<div :id="child.id" v-for="child in $store.getters.getSharedInfo[user[0]][i-1]"
:userID="child.userID" #click="setClicked"
:style="[child.clicked ? {'border-color': 'black'} : {'border-color': 'white'}]">
</div>
</template>
</div>
In my mutation I set the attribute with:
Vue.set(state.element_map[payload.uID][payload.dID], 'clicked', true);
When I debug I see the change in both code examples in my data structure after calling the setClicked function, but only in the first one the style binding is triggered and the border is drawn. The only difference I see is the use of the template tag and the more complicated data structure. But it should also work in the second example as the clicked attribute is set correctly. So what am I missing? Thanks!
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
I have a small Vue.js component which displays a favorite star icon. Clicking on the icon favorites/unfavorites the element. So far I have only implemented the UI part, which looks like this:
<template>
<div :key="favorite">
<a v-on:click="toggleFavorite" style="cursor: pointer">
<i v-show="favorite" class="text-warning fas fa-star"></i>
<i v-show="!favorite" class="text-warning far fa-star"></i>
</a>
</div>
</template>
<script>
export default {
data() {
return {
favorite: true,
}
},
mounted() {
},
methods: {
toggleFavorite() {
this.favorite = !this.favorite
}
},
props: ['team-id'],
}
</script>
<style scoped>
</style>
As you can see, the logic is pretty simple.
This works well, but one thing that bothers me is that, if I remove the :key property from my template, the icon is not updated when I click on it (even though I have checked that the underlying property is indeed updated correctly). Adding :key makes it work, I imagine because it forces Vue.js to completely re-render the component when favorite is updated.
Why is this happening? I'm fairly new to the world of JS frameworks, so forgive any obvious stuff I might be missing. I did some research online but couldn't find an explanation. I just want to make sure I'm doing things the right way and not merely hacking around the issue here.
Vue patches with the virtual DOM whenever it is necessary. That is, whenever vue detects the changes on the DOM, it patches them for faster performance. And patching in the DOM will not change the icon or image. You need to replace the DOM instead.
Thus, vue provides the way for us whenever we need to change the DOM by replacing method, we can use :key binding.
So, :key binding can be used to force replacement of an element/component instead of reusing it.
The following whole html div will be replaced whenever there is change in favorite data as we're :key binding on it:
<div :key="favorite">
<a v-on:click="toggleFavorite" style="cursor: pointer">
<i v-show="favorite" class="text-warning fas fa-star"></i>
<i v-show="!favorite" class="text-warning far fa-star"></i>
</a>
</div>
This is why vue forcefully allows us to use :key binding inside a loop as there's need of replacing the elements inside the loop whenever it detects the changes in the data. This is made compulsory from 2.2.0+ and ESLint also have implemented this feature so that if you miss :key binding inside the loop, then you'll see the error on that line when you use editor that supports eslint, so that you can fix the error.
Just an opinion, the strict requirement of the :key binding should be removed from the vue as we might want a loop of predefined data and don't want to change the DOM but we still use the v-for loop for listing bigger data. But it might be rare case though.
Read carefully on the documentation for :key binding and then you'll have an idea.
The :key binding can be useful when you want to:
Properly trigger lifecycle hooks of a component
Trigger transitions
Use :key binding to replace the DOM. Remember it slower the performance as it replace the whole DOM that is bound to the element.
Don't use :key binding when you don't want to replace the DOM or
you think there's no data changes detection required. This will
allow vue to perform better without :key binding.
Its seems to be a general issue of FontAwesome CSS regardless the framework.
There is an issue on github and here the same issue with react https://github.com/FortAwesome/Font-Awesome/issues/11967
To prove that, here is a simplified version of the same example but using bootstrap icons
new Vue({
el: '#app',
data() {
return {
fav: true
}
}
});
<script
src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"
></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div id="app">
<div>
<a v-on:click="fav = !fav" style="cursor: pointer">
<i v-show="fav" class="glyphicon glyphicon-star"></i>
<i v-show="!fav" class="glyphicon glyphicon-star-empty"></i>
</a>
</div>
</div>
You shouldn't need the :key, it's only necessary in v-for loops. I would suggest you remove it and replace your v-show with a v-if and v-else directive.
<i v-if="favorite" class="text-warning fas fa-star"></i>
<i v-else class="text-warning far fa-star"></i>
v-if removes and addes the section to the DOM whereas v-show just hides it so this way well resolve your issue
Ok I think the problem here is that you're changing your root data object. To preserve reactivity, you shouldn't change the root data object after you've instantiated Vue.
Here is your code in a simple Vue. I didn't need :key to make it work. I would keep :key for inside loops.
markup
<div id="vueRoot">
<a v-on:click="toggleFavorite" style="cursor: pointer">
<i v-show="store.favorite" class="text-warning fas fa-star">Fav</i>
<i v-show="!store.favorite" class="text-warning far fa-star">Not fav</i>
</a>
</div>
code
vm = new Vue({
el : "#vueRoot",
data() {
return { store :{
favorite: true
}}
},
mounted() {
},
methods: {
toggleFavorite() {
this.store.favorite = !this.store.favorite
}
}
}
);
This is a working example with minimal changes. From what you've showed us, you should just have <i> element, then do what you want with a dynamic class list, like...
<i :class="['text-warning','fa-star',store.favorite?'fas':'far']"></i>
I was wondering whether its possible to set a property in a v-for from the template. Specifically, story.verifyDelete is not present in the original array, but my setting it to true on click doesn't seem to activate the v-if="story.verifyDelete just above it.
<div v-for="story in stories">
<div v-if="story.verifyDelete == true">
<div>Are you sure you want to delete this story?</div>
<div #click="remove(story.id)">Delete</div>
<div #click="story.verifyDelete=false">Cancel</div>
</div>
<div #click="story.state == 'published' ? read(story) : edit(story)">{{ story.title }}</div>
<div #click="story.verifyDelete = true">Delete</div>
</div>
Objects are not reactive by normal setters = or [] in vue.
In your click handler for the Delete div, you will need to do a set in order to have vue notice the value change
this.$set(this.story, 'verifyDelete', true)
https://v2.vuejs.org/v2/guide/reactivity.html