link548 link549 link550 link551 link552 link553 link554 link555 link556 link557 link558 link559 link560 link561 link562 link563 link564 link565 link566 link567 link568 link569 link570 link571 link572 link573 link574 link575 link576 link577 link578 link579 link580 link581 link582 link583 link584 link585 link586 link587 link588 link589 link590 link591 link592 link593 link594 link595 link596 link597 link598 link599 link600 link601 link602 link603 link604 link605 link606 link607 link608 link609 link610 link611 link612 link613 link614 link615 link616 link617 link618 link619 link620 link621 link622 link623 link624 link625 link626 link627 link628 link629 link630 link631 link632 link633 link634 link635 link636 link637 link638 link639 link640 link641 link642 link643 link644 link645 link646 link647 link648 link649 link650 link651 link652 link653 link654 link655 link656 link657 link658 link659 link660 link661 link662 link663 link664 link665 link666 link667 link668 link669 link670 link671 link672 link673 link674 link675 link676 link677 link678 link679 link680 link681 link682 link683 link684

[Vue.js] VUEJS How to build a paragraph with nested label's and v-select's (vuetify and pug)

to build a paragraph with text and options displayed in a drop-down list. I’ve already done but I’m having problems with the design because it has to be in this way:

Lorem ipsum dolor sit amet, [ DROPDOWN ] consectetur adipiscing elit, [DROPDOWN] sed do eiusmod tempor incididunt ut [DROPDOWN] labore et dolore magna aliqua.

when using vuetify and a pug template to generate it dynamically because it is a quiz page and I will use this control in many places in my project.

Since in v-flex, there are already certain sizes because of the layout grid system, Is there a way to build a paragraph with nested labels and dropdowns?

I’ve tried setting values through v-flex, but since there is different sizes in every question of my quiz project that option is not working.

v-flex(xs10, sm15, md12)
div.answers(v-for=”(element, index) in questions”)
label.label {element.label}
v-select(:items=”element.combos” item-text=”name” item-value=”value” label=”Selecciona…” :key=”index”)

It is already working but I don’t know how could I generate the elements to display my components in a nested way.

Please HELP ME!!!

Solution :

You should wrap the flex with a layout and then have the label inside a flex as well as the v-select as per docs here:
https://vuetifyjs.com/en/framework/grid#layout-playground

[Vue.js] Implementing Vuetify dialog/popup modal on Vue-fullpage.js template

when attempting to implement a dialog/popup modal from Vuetify in a Vue-fullpage.js scrolling website. the modal button to be on the landing page, not on the navbar. So far, there is tried to set up the modal in a separate component called Modal.vue, and then import that component into Body.vue, with the Modal tag nested inside the Vue-fullpage.js container, but the button does not render at all on the page even though Vuetify is installed properly. How can I make a Vuetify modal work with Vue-fullpage.js? See code below. Thanks so much!

//Modal.vue

<template>
<v-layout row justify-center>
<v-dialog v-model=”dialog” persistent max-width=”290”>
<template v-slot:activator=”{ on }”>
<v-btn class=”modal-btn” color=”primary” dark v-on=”on”>Open Dialog</v-btn>
</template>
<v-card>
<v-card-title class=”headline”>Use Google’s location service?</v-card-title>
<v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color=”green darken-1” flat @click=”dialog = false”>Disagree</v-btn>
<v-btn color=”green darken-1” flat @click=”dialog = false”>Agree</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</template>

<script>
export default {
data () {
return {
dialog: false
}
}
}
</script>

<style>
</style>

//Body.vue

<template>
<div class=”body”>
<full-page :options=”options” id=”fullpage”>
<div class=”section”>
<Modal></Modal>
</div>
<div class=”section”>
<h3>Section 2</h3>
</div>
<div class=”section”>
<h3>Section 3</h3>
</div>
</full-page>

</div>
</template>

<script>
import Modal from ‘./Modal’
export default {
name: ‘Body’,
Components: {
Modal
},
data () {
return {
options: {
afterLoad: this.afterLoad,
scrollOverflow: true,
scrollBar: false,
menu: ‘#menu’,
navigation: true,
anchors: [‘page1’, ‘page2’, ‘page3’],
sectionsColor: [‘#fec401’, ‘#1bcee6’, ‘#ee1a59’]
},
logo: { width: 500 },
dialog: false
}
}
}
</script>

<style>
</style>

Solution :

!! EDIT !!:

I just noticed you have Components capitalized.. This is most likely why it’s not working for you.

This:

Components: {
Modal
},

Should be this:

components: {
Modal
},

Furthermore, when unsure of what this.afterLoad is doing.. do you have a method that isn’t shown, or is it trying to call itself? That may also be an issue which is preventing a proper render..

I doubt this is all of the code, but it does not appear you have v-app anywhere..

I was able to get this to work by creating a component which wraps around vue-full-page, as well as utilizing slots within the vue-full-page component.

If when understanding this correctly, something like this should work…

Example:

// VUE-FULL-PAGE COMPONENT
const vueFullPage = {
template: “#vue-fullpage”,
data() {
return {
options: {
menu: ‘#menu’,
anchors: [‘page1’, ‘page2’, ‘page3’],
sectionsColor: [‘#41b883’, ‘#ff5f45’, ‘#0798ec’]
},
}
}
}

// DIALOG COMPONENT
const vueDialog = {
template: “#vue-dialog”,
data() {
return {
isShown: false,
}
}
}

// MAIN vue.js APP
const vm = new Vue({
el: “#app”,
components: {
vueFullPage,
vueDialog
}
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src=”https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.js"></script>
<script src=”https://unpkg.com/vue-fullpage.js/dist/vue-fullpage.min.js"></script>
<link href=”https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel=”stylesheet”/>
<link href=”https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.css" rel=”stylesheet”/>
<link href=”https://unpkg.com/fullpage.js/dist/fullpage.min.css" rel=”stylesheet”/>

<!– ———————————- –>
<!– MAIN vue.js APP –>
<!– ———————————- –>
<div id=”app”>
<v-app>
<vue-full-page>
<template v-slot:section-one>
<vue-dialog></vue-dialog>
</template>
</vue-full-page>
</v-app>
</div>
<!– ———————————- –>

<!– ———————————- –>
<!– SIMULATES VUE-FULL-PAGE COMPONENT –>
<!– ———————————- –>
<script type=”text/x-template” id=”vue-fullpage”>
<div>
<full-page ref=”fullpage” :options=”options”>
<div class=”section”>
<h1>Section 1</h1>
<slot name=”section-one”></slot>
<v-btn class=”next” @click=”$refs.fullpage.api.moveSectionDown()”>Next</v-btn>
</div>
<div class=”section”>
<h1>Section 2</h1>
<v-btn class=”prev” @click=”$refs.fullpage.api.moveSectionUp()”>Prev</v-btn>
</div>
</full-page>
</div>
</script>
<!– ———————————- –>

<!– ———————————- –>
<!– SIMULATES DIALOG COMPONENT –>
<!– ———————————- –>
<script type=”text/x-template” id=”vue-dialog”>
<div>
<v-dialog v-model=”isShown”>
<template v-slot:activator=”{ on }”>
<v-btn
color=”red lighten-2”
dark
v-on=”on”
\>Open Dialog</v-btn>
</template>
<v-card>
<v-card-actions pa-0>
<v-spacer/>
<v-btn dark small color=”red” @click=”isShown = !isShown”>Close</v-btn>
<v-spacer/>
</v-card-actions>
<v-card-title class=”justify-center”>
<h2>
Hello from the dialog
</h2>
</v-card-title>
</v-card>
</v-dialog>
</div>
</script>

CodePen mirror

[Vue.js] How to filter UK postcodes

I’m trying to match the first part of a UK postcode to those that there is held in a JSON file. I’m doing this in Vue.

At the moment there is managed to match the postcode if it has 2 letters that match, but some UK postcodes do not start with 2 letters, some just have the one and this is where it fails.

See here for full code
https://codesandbox.io/s/48ywww0zk4

Sample of JSON

{
“id”: 1,
“postcode”: “AL”,
“name”: “St. Albans”,
“zone”: 3
},
{
“id”: 2,
“postcode”: “B”,
“name”: “Birmingham”,
“zone”: 2
},
{
“id”: 3,
“postcode”: “BA”,
“name”: “Bath”,
“zone”: 5
}

let postcodeZones = this.postcodeDetails.filter(
pc => pc.postcode
.toLowerCase()
.slice(0, 2)
.indexOf(this.selectPostcode.toLowerCase().slice(0, 2)) > -1
);

Can anyone help me find (for example) ‘B’ if I type B94 5RD & ‘BA’ if I type BA33HT?

Solution :

You can use a regular expression that matches the alphabetical letters at the start of a string.

function getLettersBeforeNumbers( postcode ) {
return postcode.match( /^[a-zA-Z]*/ )[0];
}

let a = getLettersBeforeNumbers( ‘B94 5RD’ );
let b = getLettersBeforeNumbers( ‘bA33HT’ );
let c = getLettersBeforeNumbers( ‘33bA33HT’ );

console.log( a, b, c );

/** EXPLANATION OF THE REGEXP

/ ^[a-zA-Z]* /

^ = anchor that signifies the start of the string
[ … ] = select characters that are equal to …
a-z = all characters in the alphabet
A-Z = all capatilised characters in the alphabet
* = zero or more occurances
**/

PS: You can just use the .match( /^[a-zA-Z]*/ )[0]; on the string.

[Vue.js] Cannot pass multiple arguments in vuex actions

I’m trying to call vuex action in vue.js component with multiple parameters. But in action method cannot access these passed arguments.

there is already tried passing value in payload as object which is mostly suggested here. but still it is not working.

Please look for

this.getMessageFromServer(payload);

MessageBox.vue

import vue.js from ‘vue’;
import { mapGetters, mapActions } from ‘vuex’;
import MessageView from ‘./MessageView.vue’;

export default Vue.component(‘message-box’,{

components:{
MessageView
},

data() {

return {
messageList :[],
}
},

created() {
this.fetchTimeMessage();
console.log(“reaching inside “);
},

watch: {

},

computed:{
…mapGetters([‘getMessage’,’getActiveMessageData’]),
…mapActions([‘getMessageFromServer’]),
},

methods: {

fetchTimeMessage:function(){

console.log(“fetchTimeMessage : “);

var messageUser = this.getMessage.findIndex((e) => e.muid == this.getActiveMessageData.id);
console.log(“fetchTimeMessage : “ , {messageUser});

if (messageUser == -1) {
let user_id = this.getActiveMessageData.id;
let user_type = this.getActiveMessageData.type;

console.log(“inside fetch Message : “ + user_id);
console.log(“inside fetch Message : “ + user_type);

var payload = {
‘uType’: user_type,
‘uid’ : user_id,
‘limit’: 50
};

this.getMessageFromServer(payload);

}

},

},

});

Vuex modules message.js

const state = {
messages:[],
activeMessage : {}
};

const getters={

getActiveUserId: (state) => {
let activeUserId = “”;

if (!utils.isEmpty(state.activeMessage)) {
activeUserId = state.activeMessage.id;
}

return activeUserId;
},

getActiveMessage:(state) => { return !utils.isEmpty(state.activeMessage);},

getActiveMessageData : (state) => {return state.activeMessage } ,

getMessage: (state) => {return state.messages},

};

const actions = {

getMessageFromServer({ commit, state },{utype,uid,limit}){

console.log(“mesage callback asdas : “ + uid);
let messageRequest = CCManager.messageRequestBuilder(utype, uid, limit);

messageRequest.fetchPrevious().then(messages => {

//console.log(“mesage callback : “ + JSON.stringify(messages));
// handle list of messages received
let payload = {
‘messsages’:messages,
‘id’: uid
};
console.log(“inside action_view : “ + JSON.stringify(payload));

//commit(‘updateMessageList’,payload);
})
},

setActiveMessages:function({commit},data){
commit(‘updateActiveMessage’,data);
},
};

const mutations = {

updateMessageList(state,{messages,id}){

console.log(“action details” + id);

//uid is not present

var tempObj = {
‘muid’ : id,
‘message’ : messages
}

state.messages.push(tempObj);

}

},

updateActiveMessage(state,action){

state.activeMessage = {
type: action.type,
id: action.uid
};
}

};

export default {
state,
getters,
actions,
mutations
};

Solution :

Change the way you call the action in the component:
this.$store.dispatch(‘getMessageFromServer’, payload);

And pass the payload as a single object in the action function:
getMessageFromServer({ commit, state }, payload)

And you can then access the payload properties in the action like this:
getMessageFromServer({ commit, state }, payload) {
var uid = payload.uid;
var uType = payload.uType;
var limit = payload.limit;
}

[Vue.js] How to make v-btn to not initiate route on click but still show active state based on route?

there is nice menu in toolbar and I use v-btn as activator so some items are without menu some with. Problem is on mobile devices wher hover dont work.
when I click on button it always trigger the route. I set :on route so it is highlighted automatically based on current route. So dont know how to make v-btn to not triger route but just open a menu but still show selection based on route, well… sub-route of his child

<v-menu class=”toolbarMenu” offset-y open-on-hover transition=”slide-y-transition”>
<v-btn :to=”{ path: `${constants.portfolioPath}`}” flat slot=”activator”>
<v-icon class=”hidden-sm-and-down” left>work_outline</v-icon>
{titles.portfolioMenu}
</v-btn>
<v-list two-line>
<ListItem :subtitle=”titles.portfolioProjectsPage”
:title=”titles.portfolioProjectsMenu”
:to=”{name:constants.portfolioProjectsRoute}” icon=”business”/>
<ListItem :subtitle=”titles.portfolioVideosPage”
:title=”titles.portfolioVideosMenu”
:to=”{name:constants.portfolioVideosRoute}” icon=”movie”/>
<ListItem :subtitle=”titles.portfolioPicturesPage”
:title=”titles.portfolioPicturesMenu”
:to=”{name:constants.portfolioPicturesRoute}” icon=”image”/>
</v-list>
</v-menu>

Solution :

Seems Vuetify buttons use vue-router’s router-link to handle clicks and router redirects, therefore you should be able to override default behaviour of that button.

<v-btn :to=”{ path: `${constants.portfolioPath}`}”
flat
slot=”activator”
@click.native.prevent=”someEmptyMethod”

\>
<v-icon class=”hidden-sm-and-down” left>work_outline</v-icon>
{titles.portfolioMenu}
</v-btn>

Then in the script part.

methods: {
someEmptyMethod() {
// there could be also set some action
}
}

Solution 2:

So in the end it was a little more complicated… but solvable. Just relevant code:

<template>

<v-menu class=”toolbarMenu” offset-y open-on-hover
transition=”slide-y-transition” v-model=”isPortfolioMenuShown”>
<v-btn :class=”{‘disable-events’: isPortfolioMenuShown}” :to=”{ path: `${constants.portfolioPath}`}”
@click.native.stop.prevent.capture=”onPortfolioMainMenuButtonClick()”
flat slot=”activator”>
<v-icon class=”hidden-sm-and-down” left>work_outline</v-icon>
{titles.portfolioMenu}
</v-btn>
<v-list two-line>
<ListItem :subtitle=”titles.portfolioProjectsPage”
:title=”titles.portfolioProjectsMenu”
:to=”{name:constants.portfolioProjectsRoute}” icon=”business”/>
<ListItem :subtitle=”titles.portfolioVideosPage”
:title=”titles.portfolioVideosMenu”
:to=”{name:constants.portfolioVideosRoute}” icon=”movie”/>
<ListItem :subtitle=”titles.portfolioPicturesPage”
:title=”titles.portfolioPicturesMenu”
:to=”{name:constants.portfolioPicturesRoute}” icon=”image”/>
</v-list>
</v-menu>

</template>

<style lang=”stylus” scoped>
.toolbarMenu
top: 50px

.disable-events {
pointer-events: none
}
</style>

export default class… {
isPortfolioMenuShown = false

onPortfolioMainMenuButtonClick = () => this.isPortfolioMenuShown = true
}

[Vue.js] BootstrapVue collapses with open and close all buttons

This has been troubling me for some time now.

Can someone please help me figure out how to build multiple Bootstrapvue.js collapses that open and close individually. In fact, the opening and closing individually already works, as that comes out of the box. I’d like the Open and Close all buttons to open all or close all collapses when pressed at any point.

https://codepen.io/akolinski/pen/ZNKraN

new Vue({
el: “#app”,
data: {
showCollapse: false
}
});
<link href=”https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel=”stylesheet”/>
<link href=”https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel=”stylesheet”/>
<script src=”https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src=”https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id=’app’>
<div class=”row”>
<div class=”col-12 mt-2”>

<h1>vue.js with Bootstrapvue.js collapse and open and close all buttons</h1>
<p class=”lead”>The purpose of this pen is to build multiple Bootstrapvue.js collapses that open and close individually. However we want the Open and Close all buttons to open all or close or collapses when pressed.</p>
<hr>

<div class=”row my-3”>
<div class=”col-12”>
<b-button class=”mr-2” @click=”showCollapse = true”>Open all</b-button>
<b-button @click=”showCollapse = false”>Close all</b-button>
</div>
</div>

<div class=”row mb-4”>
<div class=”col-12”>
<b-button v-b-toggle.collapse-1 variant=”primary”>Toggle Collapse 1</b-button>
<b-collapse id=”collapse-1” class=”mt-2”>
<b-card>
<p class=”card-text”>Collapse 1 contents Here</p>
</b-card>
</b-collapse>
</div>
</div>

<div class=”row mb-4”>
<div class=”col-12”>
<b-button v-b-toggle.collapse-2 variant=”primary”>Toggle Collapse 2</b-button>
<b-collapse id=”collapse-2” class=”mt-2”>
<b-card>
<p class=”card-text”>Collapse 2 contents Here</p>
</b-card>
</b-collapse>
</div>
</div>

<div class=”row”>
<div class=”col-12”>
<b-button v-b-toggle.collapse-3 variant=”primary”>Toggle Collapse 3</b-button>
<b-collapse id=”collapse-3” class=”mt-2”>
<b-card>
<p class=”card-text”>Collapse 3 contents Here</p>
</b-card>
</b-collapse>
</div>
</div>

</div>
</div>
</div>

Solution :

Thanks to the Bootstrapvue.js community on discord. We came up with this CodePen to show the correct functionality.

Credit: Hiws#0325

https://codepen.io/Hiws/pen/MdvPEX

new Vue({
el: “#app”,
data: {
collapses: [
{ show: false },
{ show: false },
{ show: false }
]
},
methods: {
openAll() {
this.collapses.forEach(collapse => {
collapse.show = true
})
},
closeAll() {
this.collapses.forEach(collapse => {
collapse.show = false
})
}
}
});
<link href=”https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel=”stylesheet”/>
<link href=”https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel=”stylesheet”/>
<script src=”https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src=”https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id=’app’>
<div class=”row”>
<div class=”col-12 mt-2”>
<h1>vue.js with Bootstrapvue.js collapse and open and close all buttons</h1>
<p class=”lead”>The purpose of this pen is to build multiple Bootstrapvue.js collapses that open and close individually. However we want the Open and Close all buttons to open all or close or collapses when pressed.</p>
<hr>

<div class=”row my-3”>
<div class=”col-12”>
<b-button class=”mr-2” @click=”openAll”>Open all</b-button>
<b-button @click=”closeAll”>Close all</b-button>
</div>
</div>

<div class=”row mb-4” v-for=”(collapse, index) in collapses” :key=”index”>
<div class=”col-12”>
<b-button @click=”collapse.show = !collapse.show” variant=”primary”>Toggle Collapse { index + 1 }</b-button>
<b-collapse v-model=”collapse.show” id=”collapse-1” class=”mt-2”>
<b-card>
<p class=”card-text”>Collapse { index + 1 } contents Here</p>
</b-card>
</b-collapse>
</div>
</div>
</div>
</div>
</div>

[Vue.js] Is it a good practice to do something based on other components name in Vue.js?

Is it considered a good practice to set a condition and run some code based on other component’s name?

For example there is a reusable child component, and want one of it’s methods to stop and not run when it is rendered as a child of a specific component, so I would have something like this inside that method:

methodName() {
if(this.$parent.$options.name == ‘someSpecificName’)
{
// prevent rest of the function if child of specific component
return;
}
else {
// continue the function when rendered inside other components
}
}

EDIT:
So to further clarify my question, there is a method inside the child component than runs normally when the particular event is fired, but what to do is prevent that method when it is being rendered inside of a specific parent component.

Solution :

I would instead set a Boolean prop in the child component and make the method fire, if that prop is set to true.

Example:

// Child component
props: {
runSomeMethod: {
type: Boolean,
default: false
}
},
mounted() {
if (this.runSomeMethod) {
this.functionToRun();
}
}
methods: {
functionToRun() {
// some code
}
}

// Parent
<template>
<child-component
:run-some-method=”true”>
</child-component>
</template>

[Vue.js] Vuejs Dropzone - How to include + icon when there are already some images in the dropzone

I’ve just used Vue-dropzone to create a simple file uploader component. However, I would like to customise it by including an icon or a button called “Add more images” when there are already some images in the dropzone so that user can understand that they can upload multiple photos. How can I achieve this? Below are my code and a screenshot of what to achieve

Update when still trying to implement this feature, any help will be greatly appreciated

Update2 when still stuck with this, is anyone nice enough to guide me through?

<template>
<vue-dropzone
id=”drop1”
:options=”dropOptions”
:useCustomSlot=”true”
@vdropzone-complete=”afterComplete”
\>
<div class=”dropzone-custom-content”>
<i class=”fas fa-cloud-upload-alt fa-3x”></i>
<h4 class=”dropzone-custom-title mb-0 mt-3”>Drag & Drop</h4>
<div class=”subtitle”>or click to add the image</div>
</div>
</vue-dropzone>
</template>

import vueDropzone from “vue2-dropzone”;

export default {
data() {
return {
dropOptions: {
url: “https://httpbin.org/post",
acceptedFiles: “image/*“,
addRemoveLinks: true,
thumbnailWidth: 160, // px
thumbnailHeight: 160
}
};
},
components: {
vueDropzone
}
};

What I would like to achieve

Solution :

It seems there is no official way to do this. But from this comment I modify his code to use with vue2-dropzone like below:

<template>
<div>
<vue-dropzone id=’dropzone’
ref=’myVueDropzone’
:options=’dropzoneOptions’
@vdropzone-file-added=’handleMoreThumbnail’
@vdropzone-removed-file=’handleMoreThumbnail’>
</vue-dropzone>
<div class=’more’ ref=’more’>+</div>
</div>
</template>

<script>
import vueDropzone from ‘vue2-dropzone’
import ‘vue2-dropzone/dist/vue2Dropzone.min.css’

export default {
components: {
vueDropzone
},

data () {
return {
dropzoneOptions: {
url: ‘https://httpbin.org/post',
addRemoveLinks: true
}
}
},

mounted () {
this.$el.removeChild(this.$refs.more)
},

methods: {
handleMoreThumbnail () {
let dropzone = this.$refs.myVueDropzone.dropzone
dropzone.files.length > 0
? dropzone.element.appendChild(this.$refs.more)
: dropzone.element.removeChild(this.$refs.more)
}
}
}
</script>

<style>
.more {
display: inline-block;
margin: 16px;
border: 3px dashed lightgray;
width: 200px;
height: 200px;
box-sizing: border-box;
color: lightgray;
border-radius: 8px;
font-size: 60px;
text-align: center;
line-height: 200px;
pointer-events: none;
}
</style>

[Vue.js] Difference between import { AppRegistry } from 'react-native'; and import AppRegistry from 'react-native';

sometimes we load something in es6 like:

import FlatList from ‘react-native’;

but sometimes we covered this imported object with curly brackets like

import {‘FlatList’} from ‘react-native’;

please tell me when should use this brackets or not.

Solution :

This is the difference between a named export and a default export. Ref

If the module exports a module as a default (ex: export default FlatList;), it can be accessed by import FlatList from “react-native”.

If it’s a named export (ex: export const FlatList;), it will have to be imported as import {FlatList} from “react-native”.

It’s entirely up to the module authors to export it as they see fit. You should consult the documentation to know how to import it for sure.

[Vue.js] what are inheritAttrs false and $attrs used for in vue?

As the question suggests, I can’t figure out their meaning and why I should use it. It’s said that it can be used so that when we have many components and we want to pass data from parent to the child’s child’s child’s component, we don’t have to use props. Is this true?

It’d be nice If you could provide an easier example. Vue.js docs don’t mention much.

Solution :

Have a look at the “Disabling Attribute Inheritance” section of the docs and the api description for the full details.

It’s main usage is to define so-called “transparent” components that pass-through attributes. The example given in the doc is a component wrapping an input element:

// Component
Vue.component(‘base-input’, {
inheritAttrs: false,
props: [‘label’, ‘value’],
template: `
<label>
{ label }
<input
v-bind=”$attrs”
v-bind:value=”value”
v-on:input=”$emit(‘input’, $event.target.value)”
\>
</label>
`
})

// Usage
<base-input
v-model=”username”
required
placeholder=”Enter the username”
/>

The required and placeholder attributes are then set on the input instead of the wrapping label.

It doesn’t really have anything to do with children of children of components but it can be used in such a hierarchy.

I hope that clears things up for you.