I have the following code:
<template is="dom-repeat" items="{{todos}}" sort="sortComparator">
<div class="row">
<paper-icon-button icon="arrow-forward"></paper-icon-button>
<span>{{item.name}}</span>
<span class="btn-set">
<paper-icon-button icon="delete" on-tap="deleteTodo">delete</paper-icon-button>
<paper-icon-button icon="star" on-tap="toggleFavorite">star</paper-icon-button>
<span>
</div>
</template>
I want to add a color yellow to icon="star" if item.isFav is true. But i am not able to find a way to do it. Any suggestion, how to do it.
give id for the button
<paper-icon-button icon="star" id="myButton" on-tap="toggleFavorite">star</paper-icon-button>
by using the id you can set the style for it now
this.$.myButton.style.color = 'yellow'
Related
vue.js
how can I make it look all in one line, next to each other?
TEMPLATE:
<div class="product">
<button #click="removeFromCart" :disabled="!inStock"> −</button>
<span>
<p v-if= "inStock == 0"> 💔 <span :class="{isRed: inStock === 0}"> {{inStock}} </span> </p>
<p v-else> ♥ {{inStock}}</p>
<button #click="addToCart" > + </button>
</span>
</div>
You can use class="row" for example in your div. Than all buttons, p-tags and so one will be shown on a row - like this:
<div class="row">
<!-- YOUR CODE IN HERE -->
</div>
To define the width of your b-button, p-tags, etc. you can use class="col-md-5 for example.. here is a link how you can define the width of a element in vue.js.
URL: https://vuetifyjs.com/en/components/grids/#order-first-and-last
Hopefully this helps you out.
I have a Buefy template which looks a little like this but I cannot work out how to centre the input box text so everything looks pretty.
I've tried adding 'has-text-centered' to basically everything and it still doesn't centre it!
<template>
<section class="hero is-info is-fullheight">
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column is-5-tablet is-4-desktop is-3-widescreen">
<div class="box">
<div class="login">
<b-field label="">
<b-input type="email"
placeholder="john#doe.com"
v-model="email">
</b-input>
</b-field>
<b-field label=""
:message="error_message">
<b-input type="password"
placeholder="****************"
v-model="password">
</b-input>
</b-field>
<div class="buttons">
<b-button #click="login" :loading="loading" type="is-info" expanded>Log In</b-button>
</div>
<p>Create an account <router-link to="/sign-up">here</router-link>!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
What am I missing here?
You could add a custom class to your input:
<b-input type="email"
placeholder="john#doe.com"
v-model="email"
class="input-text-center"
>
</b-input>
And then write a CSS for that:
.input-text-center input {
text-align: center;
}
Please note since you are writing a CSS for a Buefy module you can't do it with scoped CSS as you would normally do in a Vue single file component. Instead you should add this CSS at a more global level.
So I'm trying to bind the click event so it only runs when the actually href title is clicked on. here is my code.
<collapse :multiple-active="false">
<div v-for="(campaign, index) in allCampaigns" :key="index">
<collapse-item :title="campaign.campaign_name" #click.native.prevent="grabClientFacebookData(campaign.id)">
<div v-if="spinner == true" style="text-align: center"><img src="../../../../img/spinner.gif"></div>
<div v-if="search == true">
<vue-good-table
:columns="columns"
:rows="tableData"
styleClass="vgt-table striped bordered"/>
<highcharts :options="chartOptions"></highcharts>
</div>
</collapse-item>
</div>
</collapse>
And here is the parent element:
<div class="card card-plain">
<div role="tab" id="headingOne" class="card-header">
<a data-toggle="collapse"
data-parent="#accordion"
:href="`#${itemId}`"
#click.prevent="activate"
:aria-expanded="active"
:aria-controls="`content-${itemId}`">
<slot name="title" #click.prevent="grabClientFacebookData(campaign.id)">
{{title}}
</slot>
<i class="now-ui-icons arrows-1_minimal-down"></i>
</a>
</div>
<collapse-transition :duration="animationDuration">
<div v-show="active"
:id="`content-${itemId}`"
role="tabpanel"
:aria-labelledby="title"
class="collapsed">
<div class="card-body">
<slot></slot>
</div>
</div>
</collapse-transition>
I am fairly new to vue and was wondering if it's possible. My problem is that the click event shoots whenever any port of the collapse is clicked, not just the title.
have you tried wrapping {{title}} in a span with the event bound to that? i.e.
<span #click.prevent="grabClientFacebookData(campaign.id)">{{title}}</span>
I'm trying to click on 'Recommended' input tag of a 'Samsung' label. Please find the appropriate HTML code below.
`
<div class="card-wrapper">
<a class="card-focus has-shadow" href="/app/72292">
<div class="card-container">
<div class="card-logo">
<section class="card-info">
<div class="card-name">Samsung Push Service</div>
<div class="card-publisher hidden-xs">Samsung Push Service</div>
</section>
<div class="card-rating">
</div>
</a>
</div>
<div class="hidden-xs">
<div>
<div class="app-management">
<div class="checkbox ">
<div class="checkbox ">
<label>
<input id="Recommended-72292" class="" aria-disabled="false" value="Recommended" type="checkbox"/>
<span class="cr"/>
<span class="layer-label">Recommended</span>
</label>
</div>
<a href="/mdm">
</div>
</div>
</div>
</div>`
How to achieve this?
Your input seems to be a checkbox, not a button. Try changing its checked value instead of triggering a click:
document.getElementById('Recommended-72292').checked = true;
In selenium, click() method would do your job.
if ( !driver.findElement(By.id("Recommended-72292")).isSelected() )
{
driver.findElement(By.id("Recommended-72292")).click();
}
try following:
driver.findElement(By.cssSelector("div.checkbox input#Recommended-72292")).click();
I need to render a div with item class
<div class="ui horizontal list">
<transition-group name="custom-classes-transition” enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
<div class="item" v-for="(filter, filterIndex) in filters" :key="filterIndex”> .. </div>
</transition-group>
</div>
.item should be directly nested of .ui.list
I try to add tag="div” but this add a new div with my div.item
Simply add a class prop to your transition-group.
Example:
<transition-group class="ui horizontal list" name="custom-classes-transition" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
<div class="item" v-for="(filter, filterIndex) in filters" :key="filterIndex"> .. </div>
</transition-group>