link3014 link3015 link3016 link3017 link3018 link3019 link3020 link3021 link3022 link3023 link3024 link3025 link3026 link3027 link3028 link3029 link3030 link3031 link3032 link3033 link3034 link3035 link3036 link3037 link3038 link3039 link3040 link3041 link3042 link3043 link3044 link3045 link3046 link3047 link3048 link3049 link3050 link3051 link3052 link3053 link3054 link3055 link3056 link3057 link3058 link3059 link3060 link3061 link3062 link3063 link3064 link3065 link3066 link3067 link3068 link3069 link3070 link3071 link3072 link3073 link3074 link3075 link3076 link3077 link3078 link3079 link3080 link3081 link3082 link3083 link3084 link3085 link3086 link3087 link3088 link3089 link3090 link3091 link3092 link3093 link3094 link3095 link3096 link3097 link3098 link3099 link3100 link3101 link3102 link3103 link3104 link3105 link3106 link3107 link3108 link3109 link3110 link3111 link3112 link3113 link3114 link3115 link3116 link3117 link3118 link3119 link3120 link3121 link3122 link3123 link3124 link3125 link3126 link3127 link3128 link3129 link3130 link3131 link3132 link3133 link3134 link3135 link3136 link3137 link3138 link3139 link3140 link3141 link3142 link3143 link3144 link3145 link3146 link3147 link3148 link3149 link3150

[Vue.js] How to add space between cards in same row in vuetify Subscribe to RSS

when trying to create a n x 3 matrix sort of layout. In which each element is a card. when trying to implement it using vuetify. But, the problem is the cards are getting displayed, but there is no space between them. Even if i add a new row in it. There is no distance between that too.

there is tried using different classes and normal HTML & CSS. But it is not making it responsive

This is how the code loooks like

<template lang=”html”>
<v-container>
<v-layout>
<v-flex xs12 md4>
<v-card>
<v-img
class=”white–text”
height=”200px”
src=”https://cdn.vuetifyjs.com/images/cards/docks.jpg"
\>
<!– <v-container> –>
<v-layout>
<v-flex xs12 align-end flexbox>
<span class=”headline”>Top 10 Australian beaches</span>
</v-flex>
</v-layout>
<!– </v-container> –>
</v-img>
<v-card-title>
<div>
<span class=”grey–text”>Number 10</span><br>
<span>Whitehaven Beach</span><br>
<span>Whitsunday Island, Whitsunday Islands</span>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color=”orange”>Share</v-btn>
<v-btn flat color=”orange”>Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>

<v-flex xs12 md4>
<v-card>
<v-img
class=”white–text”
height=”200px”
src=”https://cdn.vuetifyjs.com/images/cards/docks.jpg"
\>
<v-container>
<v-layout>
<v-flex xs12 align-end flexbox>
<span class=”headline”>Top 10 Australian beaches</span>
</v-flex>
</v-layout>
</v-container>
</v-img>
<v-card-title>
<div>
<span class=”grey–text”>Number 10</span><br>
<span>Whitehaven Beach</span><br>
<span>Whitsunday Island, Whitsunday Islands</span>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color=”orange”>Share</v-btn>
<v-btn flat color=”orange”>Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>

<v-flex xs12 md4 >
<v-card>
<v-img
class=”white–text”
height=”200px”
src=”https://cdn.vuetifyjs.com/images/cards/docks.jpg"
\>
<v-container>
<v-layout>
<v-flex xs12 align-end flexbox>
<span class=”headline”>Top 10 Australian beaches</span>
</v-flex>
</v-layout>
</v-container>
</v-img>
<v-card-title>
<div>
<span class=”grey–text”>Number 10</span><br>
<span>Whitehaven Beach</span><br>
<span>Whitsunday Island, Whitsunday Islands</span>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color=”orange”>Share</v-btn>
<v-btn flat color=”orange”>Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>

//New Row

<v-layout>

<v-flex xs12 md4 >
<v-card>
<v-img
class=”white–text”
height=”200px”
src=”https://cdn.vuetifyjs.com/images/cards/docks.jpg"
\>
<v-container>
<v-layout>
<v-flex xs12 align-end flexbox>
<span class=”headline”>Top 10 Australian beaches</span>
</v-flex>
</v-layout>
</v-container>
</v-img>
<v-card-title>
<div>
<span class=”grey–text”>Number 10</span><br>
<span>Whitehaven Beach</span><br>
<span>Whitsunday Island, Whitsunday Islands</span>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color=”orange”>Share</v-btn>
<v-btn flat color=”orange”>Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>

</v-layout>
</v-container>
</template>

This is how the page looks like right now.

how do I add space between the cards and make it responsive as well.

Thanks for help!

Solution :

I just tried the scenario. you have to add this line.

<v-container grid-list-md>

instead of

<v-container>

Here is running example.
https://codepen.io/anon/pen/EBNPQb?&editable=true&editors=101

[Vue.js] show raw html in vuetify v-select Subscribe to RSS

My question seems to be easy, but couldn’t figure this out.

there is this

<VSelect :items=”common.users.options” ></VSelect> which just shows me select and its options.

common.users.options is something like this:

[
{ value:”.25”,text:”¼ hour” },
{ value:”.5”,text:”½ hour” },
]

The bad thing is that VSelect shows me &#188 and &#189 as you see, without transforming it into fraction html. https://www.codetable.net/decimal/188

how do I show fraction into vselect option’s without just plain &#188 ?

Solution :

Override the item and selection slots, and use v-html.

<v-select :items=’item’>
<template v-slot:item=’{item}’> <div v-html=’item.text’/> </template>
<template v-slot:selection=’{item}’> <div v-html=’item.text’/> </template>
</v-select>

Of course you can use something fancier than a div.

If you want more succinct code, you can also put a div directly in a slot using slot and slot-scope instead of v-slot.

<div slot=’item’ slot-scope=’{item}’ v-html=’item.text’/>

[Vue.js] Vue state variable not updating Subscribe to RSS

there is this code but when the selectCategory method gets called i dont see product.categories being updated in the vue.js dev console.

<li class=”border hover:bg-blue-100” v-bind:class=””
v-on:click=”selectCategory($event, category.id)”
\>
{category.name}
</li>

export default {
data () {
return {
product: {
categories: []
},
}
},
methods: {
selectCategory(event, id){
this.product.categories.push(id);
},
}

Solution :

This might help you as referance.

<template>
<div>
<li v-for=”category in Available.categories”
class=”border hover:bg-blue-100”
v-bind:class=””
v-on:click=”selectCategory($event, category.id)”
\>
{category.name}
</li>
</div>
</template>

<script>

export default{
data () {
return {
Available: {
categories: [{
“name”:”Fruites”,
“id”:1,
},
{
“name”:”Veges.”,
“id”:2,
}]
},
product: {
categories: []
},

}
},
methods: {
selectCategory(event, id){
this.product.categories.push(id);
console.log(this.product.categories)
},
}
}
</script>

https://codesandbox.io/s/vue-template-v2zss?fontsize=14

[Vue.js] Vue pass directives to an element in a component Subscribe to RSS

I’m trying to figure out how to pass a vue.js directive to the a tag located in the second component. It can be any directive so I can’t specifically import that one to the component.

First component

<script>
export default {
name: ‘first’,
}
</script>
<template>
<div class=”first”>
<slot />
</div>
</template>

Second component

<script>
export default {
name: ‘second’,
text: {
type: String,
required: true,
},
};
</script>
<template>
<li>
<a href=””> </a>
</li>
</template>

When I use the component to add a directive that gets attached to the a tag.

<first>
<second text=”test” />
</first>

Solution :

Look at v-bind=”$attrs” in https://vuejs.org/v2/guide/components-props.html#Disabling-Attribute-Inheritance.

V-bind actually can bind an entire key-value object.

[Vue.js] How can I set default parameter value in Vue.js method function? Subscribe to RSS

when trying to set a default parameter value for a function in one of my component methods like:

methods: {
myFuntion: function(isAction = false) {}
}

But when debug the value of isAction I get a “MouseEvent”?

Solution :

I found the solution. It looks like the event is also passed to the method by default. Therefore you can set a default parameter value on a method function like:

methods: {
myFuntion: function(event, isAction = false) {
// isAction will be false by default
// event will have the contain the event object
}
}

Solution 2:

you can also do this little trick

methods: {
myFuntion: function(isAction) {
isAction ? isAction : isAction = false
// isAction will be false by default
// event will have the contain the event object
}
}

[Vue.js] Validate if checkbox is checked depending on another validation in vuelidate Subscribe to RSS

I’m just starting with vue.js and vuelidate. there is a form which shall work in the following way:

The form shows a Yes/No radio button group.
If the radio button “Yes” is selected then the form shows a checkbox.
The submit button for the form shall be enabled if one of the following conditions is true:

The radio button is set to “No”. OR
The radio button is set to “Yes” AND the checkbox is checked.

I’m having trouble with the conditions described in 3. My current validation looks like this:

termsAccepted: { checked: value => value === true }

This basically works for case 3.2 but not for 3.1. In that case the form is still disabled.

b-form-checkbox#termsAccepted(
v-model=”termsAccepted”
:state=”!$v.termsAccepted.$invalid”
:disabled=”disableForm”
)

Solution :

Thats sound like a computed property should to the job:
Computed Property Documentation
You could do something like:

computed: {
isEnabled() {
return !radiobutton || (radiobutton && checkbox.checked)
}
}

[Vue.js] Variabel is not defined inside methods VueJs Subscribe to RSS

I’ve been defining an object inside VueJs method, and want to use that object for axios like this :

data() {
return {
name : ‘’,
password: ‘’,
email: ‘’
}
},

methods: {
submit() {
sendData = {
name: this.name,
password: this.password,
email: this.email
}

axios.post(‘http://localhost:8000/api/users', sendData)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error)
})
}
}

the output is ReferenceError: sendData is not defined

Solution :

This is because sendData is not declared anywhere. Just add const before sendData like so.

const sendData = {
name: this.name,
password: this.password,
email: this.email
}

[Vue.js] How to remove a parents node and/or css styling depending on its children Subscribe to RSS

there is a parent node that requires ‘padding-bottom:15px’ css styling. Some of the child elements are filtered from view which causes the parent node to remain in the DOM with a ‘padding-bottom:15px’ css style which looks odd - this causes other text to be pushed down the page.

When all child elements are ‘display:hidden’, how can I remove either the parents node entirely, or just the css padding?

there is attempted to use Javascript - please, no jQuery - to remove the parents node when the child elements contain a specific class. If this class is present, remove the parent node. The problem is that if there are multiple child elements, as soon as the code encounters one child element that is tagged with a certain class, it removes the parent. I only want the parent to be removed/padding removed if all child elements are ‘display:hidden’.

I did think about writing some Javascript to add classes to the parent node depending on the children, and then checking the parents classes, and if they contain an ‘active’ class which indicates there is a child element in view, the parent node is not removed. But, my current Javascript skills are limited so I would not know where to start.

The below code is something I put together to help explain my situation. But for clarification, when using Vue.js with a for loop. The for loop cycles through data and dynamically determines what class to assign - filtered/notfiltered.

Snippet of actual code:

<div
v-for=”(originalText, lineIndex) in originalTexts”
:key=”lineIndex”
:class=”{ paragraph : true }”
\>
<span
v-for=”(text, sentIndex) in originalText”
:key=”sentIndex”
class=”originalText”
:class=”[dataView === ‘Flagged’ && text.f ? ‘’ :
dataView === ‘Completed’ && text.c ? ‘’ :
dataView === ‘In-progress’ && text.v && !text.c ? ‘’ :
dataView === ‘Not started’ && !text.v ? ‘’ :
dataView === ‘All’ ? ‘’ : ‘filteredText’]“
\>

Fiddle code to help my explanation:

<div>
<div class=”paragraph”>
<span class=”filteredText”>This is the first filtered text.</span>
<br />
<span>This is the first unfiltered text and I expect it to be displayed on screen.</span>
</div>
<div class=”paragraph”>
<span class=”filteredText”>This is the second filtered text.</span>
</div>
<div class=”paragraph”>
<span>This is the second unfiltered text and I expect it to be displayed on screen.</span>
</div>
<button onclick=”filterText()”>
Filter text
</button>
</div>

function filterText() {
var elements = document.getElementsByClassName(‘filteredText’);
while(elements.length > 0){
console.log(elements[0].parentNode)
console.log(elements[0])
elements[0].parentNode.remove(elements[0].parentNode);
}
}

.paragraph {
padding-bottom: 15px;
}

JS fiddle: https://jsfiddle.net/h93qtxo6/18/

the parent node and/or padding to be removed only if all child elements contain a specific class/css styling of ‘display:none’. Preferably I only want the styling to be removed, but from what there is read, this is not easy to accomplish.

Solution :

To do what you want, you have to remove the class from the parent and use the removeChild function from the parent.

function filterText() {
var elements = document.getElementsByClassName(‘filteredText’);
while(elements.length > 0){
var parent = elements[0].parentNode;

if(parent.classList.contains(‘nonFilteredTextChild’)){
parent.classList.remove(‘paragraph’);
parent.classList.remove(‘filteredTextChild’);
parent.removeChild(elements[0]);
} else {
parent.remove(parent);
}
};
}

JS Fiddle: https://jsfiddle.net/v9Lwhqrz/

[Vue.js] How correctly include VueRouter in Laravel Project? Subscribe to RSS

I try to implement VueRouter in Laravel project but arreas error vue.js warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

app.js

import vue.js from ‘vue’
import VueRouter from ‘vue-router’
import App from ‘./components/App’
import ExampleComponent from ‘./components/ExampleComponent’
import ExampleComponent1 from ‘./components/ExampleComponent1’

Vue.use(VueRouter)

const router = new VueRouter({
routes: [
{
path: ‘/‘,
component: ExampleComponent
},
{
path: ‘/example’,
component: ExampleComponent1
}
]
})

const app = new Vue({
el: ‘#app’,
router,
template: `<app></app>`,
components: {
App
}
})

components/App.vue

<template>
<div>
<div>
<router-link :to=”‘/‘“></router-link>
<router-link :to=”‘/example’”></router-link>
</div>
<div>
<router-vue></router-vue>
</div>
</div>
</template>

<script>
export default {

}
</script>

how can I connect correctly vue-router?

Solution :

I see that you’ve misspelled <router-view /> in App.vue.js which is probably causing the warning.

[Vue.js] Provide enviroment variables for production vue build Subscribe to RSS

I would like to achieve following:

a vue.js application is build with npm build,
then the /dist result is copied to some environment
in this enviroment there is some static setting file with name=value settings
the vue.js application should read this setting from local folder where it is running or default to some setting

What is the best way to do this.

Solution :

If you want “to inject” some settings to the bundled app so I think it can be possible only with another js file (globalConfig.js) with global object like:

window.myAppSettings = {
MY_VARIABLE: ‘some_value’
}

Which will be copied somehow to the dist folder on a particular environment.
You should also prepare the app to reference that file:

Firstly, add this settings object as external lib in vue.config.js

module.exports = {
chainWebpack: config => {
config.externals({
‘my-app-settings’, ‘myAppSettings’
})
}
}

So you can get the settings in code:

import mySettingsObject from ‘my-app-settings’
//…
let myValue = mySettingsObject.MY_VARIABLE

Add reference to globalConfig.js in index.html file in the head section:

<script src=”<%= BASE_URL %>/globalConfig.js”></script>

Local Development

Probably you will need some default settings to be able to debug the app locally. In this case you can create localConfig.js in the public folder with some default values.
Then change the script in index.html to this:

<script src=”<%= BASE_URL %><%= VUE_APP_GLOBAL_SETTINGS_VERSION %>Settings.js”></script>

Then create two files in the project root .env.local and .env.production:

// .env.local
VUE_APP_GLOBAL_SETTINGS_VERSION=local

and

// .env.production
VUE_APP_GLOBAL_SETTINGS_VERSION=global

So when you run npm run serve it will load the local config and the app will load localSettings.js.
And when it builds with npm run build it will load globalSettings.js because building uses a production mode by default.

Solution 2:

If you created the project using vue.js CLI 3 you can do like this.

Make sure the settings file is named .env and place it in the project root.
In the .env file, the variables should be prefixed with “VUE_APP_“

VUE_APP_SOMEKEY=SOME_KEY_VALUE.
Access them with process.env.*.

console.log(process.env.VUE_APP_SOMEKEY) // SOME_KEY_VALUE

Here’s some more info on evironment variables in vue: vue.js CLI 3 - Environment Variables and Modes

EDIT:
Sorry. I probably misunderstood the question. This solution will not work if the settings file is in the dist folder.