Develop Reference

Vuetify, how to set default props

I have started using Vuetify, but I am looking for a way to modify the default props on some components.
Is there a way to do this?
i.e. Instead of constantly having to write:
<v-layout wrap></v-layout>
Can I make layouts default prop for wrap be true?

something along these lines, but beware if you are new to vue.js you'll have to do some reading:
relevant doc: vue mixin, vue extends
js
// some already existing component, you need to get it somehow
// most likely via `import <something-to-import>`
let theExternalComponent = {
props: { wrap: { default: false, type: Boolean } },
template: "<li>wrap:{{wrap}}</li>"
};
// this simulates the global registration
Vue.component("v-some-external-component", theExternalComponent);
// -- lets start --
// lets extend that component - and overwrite the default prop for wrap
let extendedExternalwithOtherDefaults = {
extends: theExternalComponent,
mixins: [{ props: { wrap: { default: true } } }],
};
var app = new Vue({
el: "#app",
components: { "v-my-customized-component": extendedExternalwithOtherDefaults }
});
html (pug actually but that does not matter here)
div(id="app")
ul
v-some-external-component
v-some-external-component(wrap)
v-my-customized-component
// now defaults to wrap:true
v-my-customized-component(:wrap="false")
// you can still set the wrap to false if required
output
wrap:false
wrap:true
wrap:true
wrap:false
codepen: https://codepen.io/anon/pen/MLxbEW

How I Can Change The Another Component Data on VueJS

I have a classic Vue Component like this
Vue.component('bar', {
template: `<div class="bar"></div>`,
data () {
return {
blocks: [
]
}
}
});
And also i have Vue Instance like this.
new Vue ({
el: '#app',
data: {
value: 1
},
methods: {
add: function() {
// here to do
}
}
});
When add function work, i have to add to data component blocks value. I can't use Vuex and what is this other solutions?

Since this is a parent -> child communication, you can very simply use props:
Store blocks on the parent component.
Pass blocks as a prop to bar component.
Do any additional processing using computed properties.
Display data using child's template.
Here's some guiding:
Define your component with props:
Vue.component('bar', {
template: `<div class="bar">{{blocks.length}}</div>`,
props: ['blocks']
});
Define blocks on the parent (in your example, the main vue component):
new Vue ({
el: '#app',
data: {
blocks: []
},
methods: {
add: function() {
// do something with blocks
}
}
});
Pass data down to the component:
<bar :blocks="blocks"></bar>

You can use the way which called “Event bus”
https://alligator.io/vuejs/global-event-bus/
Or you can create your own state management
https://v2.vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch
But i highly recommend you too use vuex, since it will become hard to manage events and state when the project grows

Vue - Passing data from child to parent - Basic emit not working

I have a basic Vue2 component and I am trying to pass data from the child to the parent component using $emit. Note, my-component contains a table where when I click on a row, onRowClick fires successfully, outputting 'foobar' to the console. For some reason, I'm not able to get the parent method to fire on $emit and success isn't being logged to console. Any idea why this is?
import Vue from 'vue';
import MyComponent from "./components/MyComponent.vue";
window.onload = function () {
var main = new Vue({
el: '#app-v2',
components: { MyComponent },
methods: {
onCouponApplied(data) {
console.log("Success, coupon applied, " + data);
this.saying = "Sunglasses are " + data; //Sunglasses are cool
}
},
data: {
contactEditPage: {
saying: ""
}
}
});
}
MyComponent.vue
export default {
methods: {
onRowClick(event){
this.$emit('applied', 'Cool');
console.log("foobar");
}
HTML
<div id="app-v2">
<my-component #applied="onCouponApplied"></my-component>
{{ saying }} //trying to output: sunglasses are cool
</div>

I faced the same problem. I fixed this issue by using $root.
For example in parent Vue component
mounted(){
this.$root.$on('event-name',function(value){
// code
});
},
And child component should be like this:
this.$root.$emit('event-name',[data]);
Hope can help you.

Unable to overwrite method in Vue constructor

I have a component with one method, which I'm firing on creation. It's using vue-select but purpose of this component shouldn't be relevant to my issue.
<template>
<v-select :on-change="onchangecallback"></v-select>
</template>
<script>
import Vue from 'vue'
import vSelect from 'vue-select'
Vue.component('v-select', vSelect);
export default {
methods: {
onchangecallback: () => {alert('default')}
},
created: function() {
this.onchangecallback();
}
}
</script>
In other file I'm importing this component and creating a new instance of it with Vue constructor and passing new onchangecallback method, which, by my understanding, should overwrite the default onchangecallback method:
import VSelect from './components/ui/VSelect.vue';
new Vue({
VSelect,
el: '#app',
components: {VSelect},
template: `<v-select />`,
methods: {
onchangecallback: () => {alert('custom')} // doesn't work
}
});
But when I start the app, instead of alert('custom') I still get alert('default').

I don't know what you are trying to achieve.
But here is my solution https://codesandbox.io/s/84qw9z13v9
You need to define a prop to pass your new callback function to that component (through the prop)
props: {
onchangecallback: {
type: Function,
default() {
return function() {
alert('default');
};
},
},
},
created: function() {
this.onchangecallback();
}
And the use it instead the default one.
Check all the code in that snippet.

For communication between components you're supposed to use events. Emit an event in a child component and make the parent component listen to it:
In the child component:
created() {
this.$emit('change')
}
In the parent component:
Template:
<child-component v-on:change="doSomething" />
Methods:
methods: {
doSomething() {
// ...
}
}
Explanation
In the child component you emit an event, in this case "change", whenever something changed. In your case this was upon creation of the component.
In the parent component you tell Vue that, whenever the child component emits a "change" event, it should run the method "doSomething" in your parent component.
This is used in many places, i.e. inputs, where the input emits an event "input" whenever its content changes and any parent can listen for that by using v-on:input="methodHere".

Equivalent of a React container and presentational component in Vue.js

I would like to separate the business logic and the template of a component.
In React I would use the Container/Presentation pattern.
const Container = (props) => <Presentational ...props/>
But what is the equivalent with vue.js?
Say I have this all in one component (did not test this one, it just for example) :
<template>
<div id="app">
<div v-for="user in users">
{{user.name}}
</div>
</div>
</template>
<script>
Vue.component({
el: '#app',
props: {
filter: "foo"
},
data: {
users: [],
},
ready: function () {
this.$http.get('/path/to/end-point?filter='+this.props.filter)
.then(function (response) {
this.users = response.data
})
}
})
</script>
How I could extract a container with just the fetch logic?

I really don't see a need for a container component. Abstract your fetch code out into a vuex action and bind your store state within the component using computed properties.

You can extend any Vue component, which will allow you to override any methods from the parent. So, you can create a base component and then extend that:
const Base = Vue.component('base-comp', {
template: "#base",
data() {
return {
name: 'foo'
}
}
});
const Child = Base.extend({
data() {
return {
name: 'bar'
}
}
});
Vue.component('child-comp', Child)
You can check out the JSFiddle here: https://jsfiddle.net/tdgxdhz9/
If you are using single file components, then it's simply a case of importing the base component and extending it, which keeps the original template in tact:
import Base from './BaseComponent.vue'
Base.extend({
// Javascript code here
})

You can use vuex-connect to create container components like in React. Here an example of project : https://github.com/pocka/vue-container-component-example

What you are looking for is Vue Mixins.
You can write a mixins file which contains your business logic and import it into your Vue components.
Link:- https://v2.vuejs.org/v2/guide/mixins.html