Okay, this web app I am "still" trying to make is taking longer than I expected and I still don't get some stuff about Vue 2.
For example, I have a componenent that renders in the main Vue instance and I $emit a function inside the componenet. Of course, the "inside" function is working but not the "main" one:
This is the component file PropertyHouseComponent.vue:
<template>
<fieldset class="form-group col-md">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="house"
name="house"
v-model="data"
#click="callFunc">
<label
for="house"
class="form-check-label"
>House</label>
</div>
</fieldset>
</template>
<script>
module.exports = {
props: {
value: {
type: Boolean,
required: false
}
},
data: function() {
return {
data: false
}
},
created: function() {
if(this.value) {
this.data = this.value;
}
},
methods: {
callFunc: function() { <-- this method is being called correctly
this.$emit('toggleHouse', this.data);
}
}
}
</script>
I've also tried with this.$parent.$emit('toggleHouse') and it's the same and by using instead of #click="callFunc":
watch: {
data: function(value) {
this.$emit('toggleHouse', value);
}
}
This is the main Vue instance function toggleHouse() in app.js:
Vue.component('property-house', require('./components/PropertyHouseComponent.vue'));
...
toggleHouse: function() { <-- this method is being completely ignored
if(value) {
this.csHouse = value;
}
}
Just in case you think "you are not passing value to the function, so it won't change anything, I tried with console.log(). But is not my concern right now (I think)
And finally, this is the HTML part:
<property-house :value="true"></property-house>
And then it renders in the DOM correcly:
So, what am I doing wrong this time and what I should do in order to call toggleHouse from inside the component? Thanks in advance.
You don't emit functions. You emit events.
You need to listen for the toggleHouse event, and I would additionally recommend never using camel cased event names (for reasons beyond the scope of this answer).
Let's assume you change to use toggle-house instead.
this.$emit('toggle-house', value)
Where you use the property-house should look like this
<property-house :value="true" #toggle-house="toggleHouse"></property-house>
Note the #toggle-house. This is the shortcut method for listening to an event in Vue; you could also use the full syntax, v-on:toggle-house="toggleHouse".
In either case (using #toggle-house or v-on:toggle-house) a listener is set up that listens for the toggle-house event you are emitting from the child component that calls the toggleHouse method when the event occurs.
Here is a very rudimentary example.
console.clear()
Vue.component("property-house", {
template: `
<div>
<button #click="$emit('toggle-house', 'Clicked the button')">Click Me</button>
</div>`
})
new Vue({
el: "#app",
methods: {
toggleHouse(message){
alert(message)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<property-house #toggle-house="toggleHouse"></property-house>
</div>
I needed to change the strategy since #click="callFunc" was taking the opposite checkbox value, I guess, that event was fired before changing the v-model="data".
Therefore my new components look like this:
<template>
<fieldset class="form-group col-md">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="house"
name="house"
v-model="data">
<label
for="house"
class="form-check-label"
>House</label>
</div>
</fieldset>
</template>
<script>
module.exports = {
props: {
value: {
type: Boolean,
required: false
}
},
data: function() {
return {
data: false
}
},
created: function() {
if(this.value) {
this.data = this.value;
}
},
watch: {
data: function(value) {
this.$emit('callback', value);
}
}
}
</script>
Related
I am wondering if refreshing a page that runs a Vue app will trigger the Vue's .destroyed callback.
From what I observed in a Vue app that contains these simple lifecycle callbacks:
created() {
console.log(' created');
},
destroyed() {
console.log('destroyed')；
}
only 'created' is logged (not 'destroyed'). How can I check if the .destroyed callback has been executed?
I found the similar question and answer to it on stackoverflow
Do something before reload or close in vue.js
He/she basically explains that nothing is destroyed on page reload, you need to define
window.onbeforeunload = function(){
return "Are you sure you want to close the window?";
}
If you want to do something before a page refresh
As your question was
Is Vue's 'destroyed' method called on page refresh?
No, destroyed method called if your component's controller lost or you manually destroy, above example is for manually destroy.
I have found very good example in vuejs forum which uses externally this.$destroy() method.
new Vue({
el: '#app',
data() {
return {
value: 'will work until destroy'
};
},
methods: {
destroy() {
this.$destroy();
}
},
beforeDestroy() {
console.log('Main Vue destroyed')
}
})
var tmp = Vue.extend({
template: `
<div>
<span>{{ value }}</span>
<input v-model="value" />
</div>
`,
data() {
return {
value: 'always bind and work'
};
},
beforeDestroy() {
console.log('Mounted destroyed')
}
});
new tmp().$mount('#mount-point');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
{{ value }}
<input v-model="value" />
<div id="mount-point"></div>
<button #click="destroy()">Destroy</button>
</div>
Reference
Another example. If component's control lost or removed then destroy method will be called of that component's
Vue.component('comp1', {
template: '<div>A custom component1!</div>',
destroyed(){
console.log('comp1 destroyed');
}
})
Vue.component('comp2', {
template: '<div>A custom component2!</div>',
destroyed(){
console.log('comp2 destroyed');
}
})
new Vue({
el: '#app',
data() {
return {
value: 1
};
},
methods: {
},
beforeDestroy() {
console.log('Main Vue destroyed')
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
<select v-model="value">
<option value="1">comp1</option>
<option value="2">comp2</option>
</select>
<comp1 v-if="value==1"></comp1>
<comp2 v-if="value==2"></comp2>
<button #click="destroy()">Destroy</button>
</div>
My app consists of:
A component named
<consl :output="output" #submit-to-vue><consl>
which contains an input that calls a submit() method when enter key is pressed.
<div>
<output v-html="output"></output>
<div id="input-line" class="input-line">
<div class="prompt">{{ prompt }}</div>
<div>
<input class="cmdline" autofocus
v-model.trim="command"
#keyup.enter="submit"
:readonly="submited" />
</div>
</div>
Then the method submit() emits an event #submit-to-vue to parent method submitv() that create an instance of the same component and adds it to the DOM.
//........
methods: {
submit: function () {
this.$emit('submit-to-vue')
this.submited = true
}
},
and
//......
methods: {
submitv: function () {
var ComponentClass = Vue.extend(consl)
var instance = new ComponentClass({
propsData: { output: this.output }
})
instance.$mount() // pass nothing
this.$refs.container.appendChild(instance.$el)
What I want to accomplish ?
I want to create a new consl component and add it to the DOM every time the old one is submited. (I want my app to emulate a terminal)
The problem
When submitted the new created component does not contain the #submit-to-vue event listener, which make it unable to recall the submitv() method.
Questions
How can I solve this problem ?
Is this the proper way to do things in VueJs or is there a more elegent way ?
In parent component, declare one data property=childs, it will includes all childs already created.
So once parent component receives the event=submit-to-vue, then add one new child to this.childs
Finally uses v-for to render these child components.
The trick: always consider the data-driven way, doesn't manipulate dom directly as possible.
below is one simple demo :
Vue.config.productionTip = false
Vue.component('child', {
template: `
<div>
<div>Label:<span>{{output}}</span></div>
<div>Value:<span>{{command}}</span></div>
<div id="input-line" class="input-line">
<div class="prompt">{{ prompt }}</div>
<div>
<input class="cmdline" autofocus
v-model.trim="command"
#keyup.enter="submit"
:readonly="submited" />
</div>
</div>
</div>`,
props: ['output'],
data() {
return {
submited: false,
command: ''
}
},
computed: {
prompt: function () {
return this.submited ? 'Already submitted, input is ready-only now' : ''
}
},
methods: {
submit: function () {
this.$emit('submit-to-vue')
this.submited = true
}
}
})
app = new Vue({
el: "#app",
data: {
childs: [{'output':'default:'}]
},
methods: {
addChild: function () {
this.childs.push({'output': this.childs.length})
}
}
})
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<div>
<ul>
<li v-for="(child, index) in childs" :key="index">
<child :output="child.output" #submit-to-vue="addChild()"></child>
</li>
</ul>
</div>
</div>
Im attempting to recreate this exact inline editing functionality in on of my vue components. However, and I may be wrong, I see some of the syntax is outdated Vue, in particular the v-el directive being used. I've attempted to update the syntax like so:
new Vue({
el: '#app',
data: {
numbers: [{
val: 'one',
edit: false
},
{
val: 'two',
edit: false
},
{
val: 'three',
edit: false
}
]
},
methods: {
toggleEdit: function(ev, number) {
number.edit = !number.edit
// Focus input field
if (number.edit) {
Vue.nextTick(function() {
ev.$refs.input.focus(); // error occurs here
})
}
},
saveEdit: function(ev, number) {
//save your changes
this.toggleEdit(ev, number);
}
}
})
<div id="app">
<template v-for="number in numbers">
<span v-show="!number.edit"
v-on:click="toggleEdit(this, number)">{{number.val}}</span>
<input type="text"
ref="input"
v-model="number.val"
v-show="number.edit"
v-on:blur="saveEdit(ev, number)"> <br>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
However I get a range of errors... any suggestions on how to properly execute this?
Here is the Error:
[Vue warn]: Error in nextTick: "TypeError: undefined is not an object
(evaluating 'ev.$refs.input')"
Many things changed from Vue.js 1.x to 2.x. I will walk you through the changes necessary in that snippet of yours:
v-repeat should be v-for
Replace v-el="input" with ref="input"
Since you are using ref="input" inside a v-for, then this.$refs.input will be an array of elements, not a single element.
To access each single element, you will need an index (for the array), that's why you should include the index variable in the v-for: v-for="(number, index) in numbers"
Pass the index instead of the ev to the functions, so you can get the<input>s later using vm.$refs.input[index].focus();
And that's pretty much it. After changes you'll get:
new Vue({
el: '#app',
data: {
numbers: [
{
val: 'one',
edit: false
},
{ val: 'two',
edit: false
},
{
val: 'three',
edit: false
}
]
},
methods: {
toggleEdit: function(index, number){
number.edit = !number.edit;
// Focus input field
var vm = this;
if (number.edit){
Vue.nextTick(function() {
vm.$refs.input[index].focus();
})
}
},
saveEdit: function(index, number){
//save your changes
this.toggleEdit(index, number);
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<div id="app">
<template v-for="(number, index) in numbers">
<span v-show="!number.edit"
v-on:click="toggleEdit(index, number)">{{number.val}}</span>
<input type="text"
ref="input"
v-model="number.val"
v-show="number.edit"
v-on:blur="saveEdit(index, number)"> <br>
</template>
</div>
If you want the functionality and not the code design, I'd recommend you redesign it. I think you want to edit data, and the data shouldn't have to know whether it's being edited. That is the role of a component.
So let's make a component that lets you v-model data. The component itself has a span and an input. If you're editing, it shows the input, otherwise, the span. Click starts editing, blur stops editing. When editing starts, set focus on the input.
It takes a value prop. Its input element emits an input event to signal changes (per component v-model spec.
new Vue({
el: '#app',
data: {
stuff: ['one', 'two', 'three']
},
components: {
inlineEditor: {
template: '#inline-editor-template',
props: ['value'],
data() {
return {
editing: false
}
},
methods: {
startEditing() {
this.editing = true;
this.$nextTick(() => this.$refs.input.focus());
},
stopEditing() {
this.editing = false;
}
}
}
}
});
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app">
<inline-editor v-for="item, index in stuff" v-model="stuff[index]"></inline-editor>
</div>
<template id="inline-editor-template">
<div>
<span #click="startEditing" v-show="!editing">{{value}}</span>
<input ref="input" :value="value" #input="e => $emit('input', e.target.value)" #blur="stopEditing" v-show="editing">
</div>
</template>
I'm trying to make a set of components for repetitive use. The components I'm looking to create are various form fields like text, checkbox and so on.
I have all the data in data on my parent vue object, and want that to be the one truth also after the user changes values in those fields.
I know how to use props to pass the data to the component, and emits to pass them back up again. However I want to avoid having to write a new "method" in my parent object for every component I add.
<div class="vue-parent">
<vuefield-checkbox :vmodel="someObject.active" label="Some object active" #value-changed="valueChanged"></vuefield-checkbox>
</div>
My component is something like:
Vue.component('vuefield-checkbox',{
props: ['vmodel', 'label'],
data(){
return {
value: this.vmodel
}
},
template:`<div class="form-field form-field-checkbox">
<div class="form-group">
<label>
<input type="checkbox" v-model="value" #change="$emit('value-changed', value)">
{{label}}
</label>
</div>
</div>`
});
I have this Vue object:
var vueObject= new Vue({
el: '.vue-parent',
data:{
someNumber:0,
someBoolean:false,
anotherBoolean: true,
someObject:{
name:'My object',
active:false
},
imageAd: {
}
},
methods: {
valueChange: function (newVal) {
this.carouselAd.autoOrder = newVal;
}
}
});
See this jsfiddle to see example: JsFiddle
The jsfiddle is a working example using a hard-coded method to set one specific value. I'd like to eighter write everything inline where i use the component, or write a generic method to update the parents data. Is this possible?
Minde
You can use v-model on your component.
When using v-model on a component, it will bind to the property value and it will update on input event.
HTML
<div class="vue-parent">
<vuefield-checkbox v-model="someObject.active" label="Some object active"></vuefield-checkbox>
<p>Parents someObject.active: {{someObject.active}}</p>
</div>
Javascript
Vue.component('vuefield-checkbox',{
props: ['value', 'label'],
data(){
return {
innerValue: this.value
}
},
template:`<div class="form-field form-field-checkbox">
<div class="form-group">
<label>
<input type="checkbox" v-model="innerValue" #change="$emit('input', innerValue)">
{{label}}
</label>
</div>
</div>`
});
var vueObject= new Vue({
el: '.vue-parent',
data:{
someNumber:0,
someBoolean:false,
anotherBoolean: true,
someObject:{
name:'My object',
active:false
},
imageAd: {
}
}
});
Example fiddle: https://jsfiddle.net/hqb6ufwr/2/
As an addition to Gudradain answer - v-model field and event can be customized:
From here: https://v2.vuejs.org/v2/guide/components.html#Customizing-Component-v-model
By default, v-model on a component uses value as the prop and input as
the event, but some input types such as checkboxes and radio buttons
may want to use the value prop for a different purpose. Using the
model option can avoid the conflict in such cases:
Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean,
// this allows using the `value` prop for a different purpose
value: String
},
// ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>
The above will be equivalent to:
<my-checkbox
:checked="foo"
#change="val => { foo = val }"
value="some value">
</my-checkbox>
I'd like to know is there any way to fire custom functions - one function when checkbox changes to true value and another when it changes to false value (without using $watch).
For example:
I have input wrapped in root div
<div id="root">
<input type="checkbox" v-model="editModeOn">
</div>
and a vue instance with disableEditMode (on checkbox unchecked) and enableEditMode (on checkbox checked)
new Vue({
el: '#root',
props: {
editModeOn: {
type: Boolean,
default: false
}
},
methods: {
disableEditMode() {
// some code
},
enableEditMode() {
// some code
}
},
});
How can I achieve this functionality? Thanks!
Handle the change event.
#change="editModeOn ? enableEditMode() : disableEditMode()"
new Vue({
el: '#root',
data:{
editModeOn: false
},
methods: {
disableEditMode() {
console.log("disable")
},
enableEditMode() {
console.log("enable")
}
},
});
<script src="https://unpkg.com/vue#2.4.2"></script>
<div id="root">
<input type="checkbox" v-model="editModeOn" #change="editModeOn ? enableEditMode() : disableEditMode()">
</div>