Screen
Look at the red labels, rendered with vue-component. They suppose to act the same as green labels, rendered with blade-template. Why there's a difference?
Blade template:
<div class="col-sm-2">
<span class="label label-success">good badge 1</span>
<span class="label label-success">good badge 2</span>
<span class="label label-success">good badge 3</span>
<span class="label label-success">good badge 4</span>
<span class="label label-success">good badge 5</span>
<badge-list></badge-list>
<span class="label label-success">good badge 6</span>
<span class="label label-success">good badge 7</span>
</div>
<div class="col-sm-10">
some text</br>
some text</br>
some text</br>
some text</br>
some text</br>
some text</br>
</div>
Vue-component:
<template>
<span v-for="Badge in Badges" class="label label-danger">{{ Badge.name }}</span>
</template>
<script>
export default {
data () {
return {
Badges: [
{"name": "bad badge 1"},
{"name": "bad badge 2"},
{"name": "bad badge 3"},
{"name": "bad badge 4"},
{"name": "bad badge 5"},
],
};
},
};
</script>
You may use 
 HTML entity like:
<template v-for="Badge in Badges">
<span class="label label-danger">{{ Badge.name }}</span>

</template>
The actual explanation for this is strange:
When you type your HTML, you press 'enter' / 'return' to create a new line (which inserts an invisible character if you will) after each <span> element.
For the elements constructed with Vue (or JavaScript in general for that matter), the returns aren't present, and, thus, the trailing space is not inserted.
Chris Coyier eloquently describes the options for space removal in this article.
The solution is to override the Bootstrap CSS for labels:
.label {
display: inline-block;
}
Change label CSS from "display: inline" to "display: inline-block".
Related
I am trying to select a value from multiselect dropdown via Cypress and using this
cy.get(':nth-child(7) > .row > :nth-child(1)')
.select('The Watermark at Cherry Hills', { force: true })
.invoke('val')
.should('0', 'The Watermark at Cherry Hills')
and failing it. Anyone can guide me how to handle this ?
<div data-vv-name="Community 1" class="">
<div class="ui fluid search selection dropdown form-control">
<i class="dropdown icon"></i><input autocomplete="off" tabindex="0" name="" class="search">
<div data-vss-custom-attr="" class="text default">Select community/s
</div>
<div tabindex="-1" class="menu hidden" style="display: none;">
<div data-vss-custom-attr="" class="item">
The Watermark at Cherry Hills
</div>
<div data-vss-custom-attr="" class="item">
The Fountains at Albemarle
</div>
<div data-vss-custom-attr="" class="item">
The Sapphire Valley
</div>
</div>
</div>
</div>
First, you have to do a click() operation on the dropdown to expand it. Now using each() you can loop through all the elements of the dropdown, and using an if condition click the one you want to select.
cy.get('.search.selection.dropdown').click()
cy.get('div.item').each(($ele) => {
if ($ele.text() == "The Watermark at Cherry Hills") {
cy.wrap($ele).click()
}
})
I am working with vue-slick(v-1.1.15) in vuejs to show some sliding images. Although the images are auto-slidable but I also need arrows to make them slide manually.
The problem is instead of those arrows, two buttons "Next" and "Previous" are being shown.
I have also imported the .css file for vue-slick to get it work, but useful results were found.
Below is my code:
<template>
<div>
<div class="idb-full-block">
<slick ref="slick" :options="slickOptions" v-if="someVar !== null">
<div class="content-wrap" v-for="var in someVar" :key="var.img">
<div class="idb-block-content p-20">
<div class="pp-image mb-20 d-flex justify-content-center align-items-center">
<img :src="var.img" class="img-fluid" alt="pp" width="" height="" />
</div>
<div class="d-flex justify-content-between mb-10">
<h5 class="mb-0">{{var.title}}</h5>
<h5 class="text-danger mb-0 fw-bold">{{var.price}}</h5>
</div>
<div class="pp-ratings">
<i v-for="(stars, index) in 5" :key="index" class="fa fa-star text-warning"></i>
</div>
</div>
<ul class="pp-stats footer-border">
<li class="w-33">
<h4 class="fw-bold">{{var.sales}}</h4>
</li>
<li class="w-33">
<h4 class="fw-bold">{{var.rating}}</h4>
</li>
<li class="w-33">
<h4 class="fw-bold">{{var.comments}}</h4>
</li>
</ul>
</div>
</slick>
</div>
</div>
<script>
import Slick from "vue-slick";
import { someVar } from "./someVar.js";
import `node_modules/slick-carousel/slick/slick.css`;
export default {
components: {
Slick
},
data() {
return {
someVar,
slickOptions: {
slidesToShow: 1,
arrows: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
},
}
},
};
</script>
Any kind of help would be appreciated.
I Found the answer in other Question
You need to
Making sure you passing arrows props as true
the default color and background is white so you need to change
it first if your website is white.
Using slot {nextArrow, prevArrow }
.slick-prev:before,
.slick-next:before {
color: red !important;
}
<template #prevArrow="arrowOption">
<div class="custom-arrow">
{{ arrowOption.currentSlide }}/{{ arrowOption.slideCount }}
</div>
</template>
<template #nextArrow="arrowOption">
<div class="custom-arrow">
{{ arrowOption.currentSlide }}/{{ arrowOption.slideCount }}
</div>
</template>
I tried everything to make the navigation links hide when I clicked but it didn't worked. Here my Header.vue file.
<template>
<nav class="navbar is-dark is-fixed-top">
<div class="container">
<div class="navbar-brand">
<router-link to="/" class="navbar-item">
<img src="../../assets/logo.png" width="">
</router-link>
<a role="button"
:class="{ 'is-active': ShowMenu }"
class="navbar-burger burger"
#click="toggleMenu()"
aria-label="menu"
aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div :class="{ 'is-active': ShowMenu }"
class="navbar-menu">
<div class="navbar-start">
<router-link to="/" class="navbar-item">Home</router-link>
<router-link to="/about" class="navbar-item">About</router-link>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<router-link to="/login" class="button is-dark">
<span><i class="fa fa-lock"></i> Login</span>
</router-link>
</p>
<p class="control">
<router-link to="/register" class="button is-light">
<span><i class="fa fa-user"></i> Register</span>
</router-link>
</p>
</div>
</div>
</div>
</div>
</div>
</nav>
Here's the JS codes. Navigation are working when a click the links but the only problem I have is that it didn't automatically hide.
export default {
name: "Header",
data() {
return {
ShowMenu: false,
NavigationItems: true,
NavigationItems: false
}
},
methods: {
toggleMenu: function() {
this.ShowMenu = !this.ShowMenu
},
toggleNavItem: function() {
false
}
}
}
Try
<a v-if='!ShowMenu' role="button" ...
instead of using CSS
You shouldn't use v-if it will "kill" the element in the dom, but if you only want to toggle it use v-show width !ShowMenu like Steven explained.
And if you want to use a CSS class: do you have a class called is-active and is the default behavior of .burger display: none;? If you want to stay on this solution please provide us your CSS.
I am new to Vue but I think that this can be really useful.
I have my first problem this simplified example
var appvue = new Vue({
el: '#appvue',
data: {
selectedProd: []
}
});
body {
background: #20262E;
}
.form-row{
width:24%;
display:inline-block;
}
#appvue {
background: #fff;
padding:10px;
}
#prod_adjust{
margin-top:20px;
background: #eee
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<div class="prod-wrap" id="appvue">
<div class="form-row">
<input v-model="selectedProd" name="product-1260" id="product-1260" type="checkbox" value="1260">
<label for="product-1260">
<div class="thumb">
<img src="https://picsum.photos/100/100">
</div>
<div class="details">
<span class="brand">Brand 1</span>
<span class="product-title">Product 1</span>
</div>
</label>
</div>
<div class="form-row">
<input v-model="selectedProd" name="product-1261" id="product-1261" type="checkbox" value="1261">
<label for="product-1261">
<div class="thumb">
<img src="https://picsum.photos/100/100">
</div>
<div class="details">
<span class="brand">Brand 2</span>
<span class="product-title">Product 2</span>
</div>
</label>
</div>
<div class="form-row">
<input v-model="selectedProd" name="product-1263" id="product-1263" type="checkbox" value="1263">
<label for="product-1263">
<div class="thumb">
<img src="https://picsum.photos/100/100">
</div>
<div class="details">
<span class="brand">Brand 3</span>
<span class="product-title">Product 3</span>
</div>
</label>
</div>
<div class="form-row">
<input v-model="selectedProd" name="product-1264" id="product-1264" type="checkbox" value="1264">
<label for="product-1264">
<div class="thumb">
<img src="https://picsum.photos/100/100">
</div>
<div class="details">
<span class="brand">Brand 4</span>
<span class="product-title">Product 4</span>
</div>
</label>
</div>
<div id="prod_adjust">
<p v-for="product in selectedProd">{{product}}</p>
</div>
</div>
I have a lot of products like the checkboxes above. I need to have the list of checked items in another place.
I did this with v-model and v-for - but my main problem is now that there are sending only the value from the checkboxes - I also need img-src, brand, product-title - all these parameters I also can have more attributes in an input.
But how I can pass them in data: { selectedProd:[]} with Vue?
Or I do I need to create a separate JS function which will collect all this data and send it to the array selectedProd?
Thank you in advance
You would want to create an object with the data you need for the product. Then you can use v-for to loop through and display them the way you'd like.
In the example, I included a computed function that automatically returns the ones that get checked. This is done by v-model binding the checkbox to a flag inside your object. In this example, I called it selected, for simplicity.
var appvue = new Vue({
el: '#appvue',
data: {
products: [{
id: 1260,
brand: "Brand A",
product: "Bubblegun",
image: "https://picsum.photos/100/100",
selected: false
}, {
id: 1261,
brand: "Brand B",
product: "Bubblegum",
image: "https://picsum.photos/100/100",
selected: false
}],
},
computed: {
selectedProd() {
return this.products.map(product => {
if (product.selected) return product
})
}
}
})
body {
background: #20262E;
}
.form-row {
width: 24%;
display: inline-block;
}
#appvue {
background: #fff;
padding: 10px;
}
#prod_adjust {
margin-top: 20px;
background: #eee
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.min.js"></script>
<div class="prod-wrap" id="appvue">
<div class="form-row" v-for="product in products">
<input v-model="product.selected" name="product-1260" id="product-1260" type="checkbox">
<label for="product-1260">
<div class="thumb">
<img :src="product.image">
</div>
<div class="details">
<span class="brand">{{product.brand}}</span>
<span class="product-title">{{product.product}}</span>
</div>
</label>
</div>
<div id="prod_adjust">
<p v-for="product in selectedProd">{{product}}</p>
</div>
</div>
If you have the input as a JSON which has all the properties you are asking for (product_ID, img src, brand name) then you can assign the object to v-model instead of product_ID.
Your JSON array should look like this,
productsArray: [
{ productID: 1260,
product-title: "Product 1",
brand: "Brand 1",
img: "https://picsum.photos/100/100"
},
{ productID: 1261,
product-title: "Product 2",
brand: "Brand 2",
img: "https://picsum.photos/100/100"
},]
Then inside v-for you can read each object and when selected you can assign the entire object into selectedProd
I used next way finally
vueproducts = function(){
appvue.selectedProd = [];
var tempprod = {};
$('.form-row input').each(function(){
if ($(this).is(":checked")){
tempprod.id = $(this).val();
tempprod.img = $(this).parent().find('img').attr('src');
tempprod.title = $(this).parent().find('.product-title').html();
appvue.selectedProd.push(tempprod);
tempprod = {};
};
});
}
I have a form to add new items to my array, but would like to hide the form until the user is ready to add an item. The form is hidden and I have a #click function attached to an icon to toggle the form to show, which is also working. But, as soon as the form is toggle to show, it hides automatically within a few seconds.
#click icon
<li class="m-portlet__nav-item">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon" #click="isSection ^= true">
<i class="flaticon-add"></i>
</a>
</li>
form
<div class="row" v-show="isSection">
<div class="col-md-12">
<div style="border: 1px solid #fcfcfc; padding: 1em">
<h5>Add New Section</h5>
<hr>
<form v-on:submit.prevent="addNewSection">
<div class="form-group m-form__group">
<input v-model="sections.name" placeholder="Name" class="form-control m-input" style="margin-bottom: .5rem"/>
<textarea v-model="sections.description" placeholder="Description" class="form-control m-input" style="margin-bottom: .5rem"/></textarea>
<button type="submit" class="btn btn-primary">Add Section</button>
</div>
</form>
</div>
</div>
</div>
script
new Vue({
el: "#main",
data: {
isSection: false,
...
addNewSection
addNewSection() {
this.sections.push(
{
name: this.sections.name,
description: this.sections.description,
items: []
}
);
this.sections.name = "";
this.sections.description = "";
},
By setting href="" here:
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon" #click="isSection ^= true">
you are triggering a re-load of your page when you click the link.
Try href="#".
<a href="#" class="m-portlet__nav-link m-portlet__nav-link--icon" #click="isSection ^= true">
I expect you also just want to negate isSection as mentioned in the comment above even though what you wrote does serve the same purpose; it's not a commonly used syntax.
<a href="#" class="m-portlet__nav-link m-portlet__nav-link--icon" #click="isSection = !isSection">