I have html element:
<div style="grid-column: span 1">
I would like to use function to determine span size:
I try something like this, but it doesn't render.
:style="{ 'grid-column: span': getColumnSize('string') }"
what is correct syntax?
use computed method. in computed method you can write a function that return your style as an object. then use it in your html.
<div :style="getColumnSize"></div>
computed: {
getColumnSize() {
return {
gridColumn: 'span 1'
}
}
}
note: you should use camel case.
i would store the value of span in data then place the value in style like this
<div :style="`grid-column : span ${spanValue}`"> new div with grid</div>
you can do like this
<div :style="{ 'grid-column': `span ${getColumnSize('string')}` }"></div>
Related
I am trying to understand how Vue.js' directives work and how they can be used to manipulate the DOM. I have been experimenting with a simple example that should bind the "color" attribute of a div to a data property, but it is not working as expected.
Here is my code:
Copy code<div id="app">
<div v-bind:color="color"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
color: 'red'
}
})
</script>
I have also tried using the v-bind shorthand :color and the v-bind attribute with different variations of the property name such as :color, :color.sync, :color.once, but it does not seem to work.
I have also looked into the documentation of Vue.js and read about directives, but I can't seem to find a way to get this to work. Can someone please explain to me how I can bind the color attribute of the div to the "color" data property in Vue.js?
What is the correct way to bind color attribute of div element with color data property in Vue.js and also please explain how it works internally?
I think you want to set text color (CSS color attribute), right?
<div :style="{color: color}"></div>
The colon at the beginning of :style makes it an attribute handled as vue expression. :style is a special attribute in that it takes an object where keys are css properties in camel case (i.e. borderRadius) and values are expressions, like the value of your color variable. Have a look at class and style bindings in vue
The data needs to return an object, like this:
data: function () {
return {
count: 0
}
}
To bind the inline CSS styles, You have to use Object Syntax binding as v-bind:color is not a pre defined directive in Vue.
Hence, This solution will work fine as per your requirement.
<div :style="{ 'color': color }"></div>
Live Demo :
new Vue({
el: '#app',
data: {
color: 'red'
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div :style="{ 'color': color }">Hello VueJS!</div>
</div>
I have 2 themes: 'light-theme', 'dark-theme'
I would like to set the <html class=""> according to a value i have in my vuex store. Like darkMode: true
How can i set the <html> class reactively like that?
(using vue3)
You can use simple javascript for it.
Just add a button or toggle for theme change like:
<button #click="changeTheme">Change Theme</button>
and inside this component add changeTheme method inside methods:
document.getElementsByTagName("html")[0].setAttribute( 'class', 'newThemeClass' );
Or just add watcher to your store value and change according to it:
computed:{
...mapGetters(["yourGetterName"])
},
watch: {
darkMode(value) {
document.getElementsByTagName("html")[0].setAttribute( 'class', value );
},
}
According to Vue docs, there are following ways to do this.
1.Binding to Objects
<div :class="{ 'active-class': isActive }"></div>
The above syntax means the presence of the 'active-class' class will be determined by the truthiness of the data property isActive.
2.Binding to Arrays
<div :class="[isActive ? activeClass : '', errorClass]"></div>
This will always apply errorClass, but activeClass will only be applied when isActive is truthy.
I'm trying to render some HTML string in template, but I want them to be string, I don't want to render "rich text"
I started with:
<template>
<div>{{'something <like /> this'}}</div>
</template>
but vue will render the code above into follwing:
<like /> will be rendered as html tag
<div>{{'something <like></like> this'}}</div>
but what I want is this:
<div>something <like/> this</div>
I know I can put the text inside data
<template>
<div>{{text}}</div>
</template>
<script>
export default {
data() {
return {
text: 'something <like /> this'
}
}
}
</script>
but this would become tedious, and how can I do it directly inside template
I think you need to pre-process your string first like this
text.replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, """);
Then you can use it in the template
You'll need to replace the characters < and > as you've pointed out, but you'll also need to use the v-html directive since the tags in the string literal break the mustache binding.
In your script:
methods: {
htmlToText(html) {
return html.replace(/</g, '<').replace(/>/g, '>')
},
}
In your template:
<div v-html="htmlToText('something <like/> this')"></div>
Doing <div>{{ htmlToText('something <like/> this') }}</div> will not work.
I'm a bit new to vuejs and I'm not even sure what exactly am I looking for,
I have this template:
<template>
<md-content class="md-elevation-2">
<div class="md-layout">
<div class="md-layout-item" v-for="key in ruleData">
{{ getKeyOutput(key) }}
</div>
</div>
</md-content>
</template>
and my script is:
<script>
export default {
props: ['ruleData'],
methods: {
getKeyOutput(value) {
switch (typeof value) {
case 'string':
if (/(ban)$/g.test(value)) {
return createElement(`<h1>${ value }</h1>`) // here is the problem
} else {
return value
}
break
case 'number':
return String(value)
break
case 'boolean':
return String(value)
break
default:
return value
break
}
}
}
}
</script>
What I want to do is on some case return the string, and in some other cases like return an HTML component like h1 for example, and I can't seem to understand how I need to do this, or even if I have the correct approach for this.
You have to use v-html directive to render html tags that is stored as a string.
if you don't use v-html then vuejs by default escapes the html tags and therefore the html tags are displayed as a plain text. You don't need to use createElement() at anyplace in your code, just remove it.
Change your vue template code as below and verify if you are getting the expected result
<div
class="md-layout-item"
v-for="(value,key) in ruleData"
:key="key"
v-html="getKeyOutput(value)">
</div>
You don't need to use createElement() anymore, just return the html code as a string or template string
if (/(ban)$/g.test(value)) {
return `<h1>${ value }</h1>`; //problem solved
} else {
return value
}
Read More details about v-html in the docs https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML
I am passing in a 'type' prop to my component to use as a BEM modifier.
<div class="badge badge--{{this.$props.type}}">
However when I try and concatenate the class I get an error. How do I achieve this?
A cleaner way to do it is to create a computed property :
computed: {
badgeClasses() {
return `badge badge--${this.type}`;
},
},
And then bind it in your HTML :
<div :class="badgeClasses">
But you can also just bind the property, as you tried, but with a backquote instead of a simple quote :
<div class="`badge badge--${type}`">