I have a simple div with class like:
<template>
<div class="grid grid-cols-2">
</div>
</template>
But I want to remove a grid-cols-2 if a condition is true, so I try:
<div :style="!results.contactCompany ? 'grid grid-cols-2' : 'grid'">
But it does not work. What am I doing wrong?
You cannot apply class using :style. instead use v-bind:class
<div v-bind:class = "!results.contactCompany ? 'grid grid-cols-2':'grid'">
Related
Im whatching a vue.js course and the presentator use this code for an if/else stament on the vue component.
Please if someone can tell me, to understand a way more better the code, im be appreciative.
<template>
<!-- ? = if // : = else -->
<div :class="[task.reminder ? 'reminder' : '', 'task']">
<h3>{{ task.text }}
<i class="fas fa-times"></i>
</h3>
<p>{{ task.day }}</p>
</div>
</template>
<div :class="[task.reminder ? 'reminder' : '', 'task']">
source: https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax
this line will conditionally add array of class that will be joined by a space . So on the first element of the array, it is a ternary operator which depend on task.reminder value, if it is true or something meet the requirement of the ternary, it will add reminder class or an empty string '' which will not be added to the class, and on the index 1 of the array which is task will be added.
Say for example that your task.reminder is true, the div will be render as below:
<div class="reminder task">
if it is false, it will be render as
<div class="task">
{{ task.text }}
source: https://v2.vuejs.org/v2/guide/syntax.html?redirect=true#Text
this is how we render out a variable from vue into the DOM, wrap with {{ and }}
Let's say I have this html element
<div class="progress-bar w-90"></div>
and I want to replace 90 with an object from vue. I tried below but syntax
<div :class="progress-bar w-{{ progress.value }}"></div>
You cannot use {{ }} in attribute/props, better to use template literals as below.
<div :class="`progress-bar w-${progress.value}`"></div>
You can achieve text-binding in this way
<div :class="'progress-bar w-'+progress.value"></div>
I have a v-for loop like this
<div v-for="deal in deals">
<div class="title">{{deal.title}}</div>
</div>
I'm trying to set a variable of a hover state, this is what I tried:
<div v-for="deal in deals" #mouseover="deal.hover = true" #mouseout="deal.hover = false">
<div class="title">{{deal.title}}</div>
<div class="description" v-if="deal.hover">{{deal.description}}</div>
</div>
Note that deal.hover is undefined by default (and it can't be pre-defined as false).
Is something like this possible in VueJS?
I'm not sure what you mean by "temporary" variable. Your code is attempting to add a hover property to each deal. You can certainly do that.
<div v-for="deal in deals"
#mouseover="$set(deal, 'hover', true)"
#mouseout="$set(deal, 'hover', false)"
<div class="title">{{deal.title}}</div>
<div class="description" v-if="deal.hover">{{deal.description}}</div>
</div>
Note the use of $set to add a reactive property to an object (see https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects).
i have a doubt , i need to add v-bind and v-for to same class is that possible in vue.js?
<div class="printIconSection" v-for="report in reports" :key="report.property" >
<div class="printIcon" id="printReport_AId" v-if="isOverview">
<font-awesome-icon :icon="report.icon" #click="printWindow()"/>
</div>
</div>
i need to add v-bind:class="{ 'title-long' : changeTitle }" to the printIconSection class .
how can combine ?is that recommended ?
<div
v-for="report in reports"
:key="report.property"
:class="['printIconSection', { 'title-long' : changeTitle }]">
<div class="printIcon" id="printReport_AId" v-if="isOverview">
<font-awesome-icon :icon="report.icon" #click="printWindow()"/>
</div>
</div>
Try doing this.
I hope it helps
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