Vue not reactive to nested data() changes? - javascript

My Vue 2 fails to react when an entry is added to an object returned by data(). I can make it work other way but would like to know the underlying reason. See also JSfiddle
var app = new Vue ({
el: "#app",
data() {
return {
addedRows: {
'section1': {}
}
}
},
methods: {
addToList(chapter) {
this.addedRows.section1[chapter] =
this.addedRows.section1[chapter] || []
this.addedRows.section1[chapter].push({'T': 'XXX'})
console.log(this.addedRows)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<span #click="addToList('chapter1')">{{ addedRows }}</span>
</div>

Related

Why doesn't my component template show up in Vue?

I've just started learning Vue. Now I'm trying to build my first component, but the template didn't show up, and the console didn't give me any error.
Here's some of my code:
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
and here's a Jsbin with my full code
Your Vue instance needs a mounting id specified in the el property:
var vm = new Vue({
el: '#app', // Specifying a DOM id "app"
data() {
// ...
}
})
And the app template needs to be wrapped with that same id:
<div id="app">
<button-counter></button-counter>
</div>
Demo:
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
var vm = new Vue({
el: '#app',
data() {
return {
name:'yazid',
age:'20',
date:'press to known the date',
skills:['HTML','CSS','JS'],
ele:'<h1> elements from vue js</h1>',
completed_languages:[{
lang:'html',
percent:'90%'
},{
lang:'CSS',
percent:'70%'
},{
lang:'JS',
percent:'70%'
}]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button-counter></button-counter>
</div>

How to get the default content slot sent to a Vue component?

In the following example, I would like a component that doubles a number. This number is passed not as a property, but as content. How is it possible to get the content value in Vue?
var twice = {
template: '<div>{{ value }}</div>',
computed: {
value() {
return parseInt(this.$slot) * 2;
}
}
};
new Vue({
el: '#app',
components: {
twice: twice
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
<twice>21</twice>
</div>
You could access the default slot text by this.$slots.default[0].text :
var twice = {
template: `<div>
number : <slot></slot><br>
<div>double : {{ value }}</div>
</div>`,
computed: {
value() {
return parseInt(this.$slots.default[0].text) * 2;
}
},
mounted() {
console.log(this.$slots.default[0].text)
}
};
new Vue({
el: '#app',
components: {
twice: twice
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<twice>21</twice>
</div>

Using props in vue components

I'm just learning Vue, and now starting with props. I'm having trouble integrating them into my code below.
I want to make so a prop name can be sent to the greet component. I want name to be shown in the component<greet name="User"></greet> and it to render: <div>Welcome, User!</div>
Vue.component('greet', {
data() {
return {
}
},
template: '<div>Welcome !</div>'
})
new Vue({ el: '#app' })
There is good documentation about it
Vue.component('greet', {
props: {
'player-name': {
type: String,
required: true
}
},
data() {
return {
}
},
template: '<div>Welcome {{playerName}}!</div>'
})
new Vue({
el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<greet player-name="User"></greet>
</div>

vuejs - bind to component data

I've created a simple component:
https://jsfiddle.net/s08yhcda/1/
<div id="app">
<button-counter>My counter: <span v-text="count"></span></button-counter>
</div>
// Define a new component called button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++"><slot></slot></button>'
})
// boot up the demo
var demo = new Vue({
el: '#app'
})
Yet I cannot bind to the inner component data (counter). How can a component expose its data to the <slot> scope? I know the "events up, props down" idea. But still I thought it would be possible to bind component data inside its scope (inside the <button-counter> element)
I prefer not using event for something that simple. Any other way?
There are multiple ways to solve this problem:
Using events
This is usually the best method, as it is expected by other Vue developer
// Define a new component called button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
methods: {
click() {
this.count++;
this.$emit('input', this.count);
},
},
template: '<button v-on:click="click"><slot></slot></button>'
})
// boot up the demo
var demo = new Vue({
data() {
return {
count: 0,
};
},
el: '#app'
});
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<button-counter #input="count = $event">My counter: <span v-text="count"></span></button-counter>
</div>
Using refs:
// Define a new component called button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
methods: {
click() {
this.count++;
},
},
template: '<button v-on:click="click"><slot></slot></button>'
})
// boot up the demo
var demo = new Vue({
data() {
return {
mounted: false,
};
},
mounted() {
this.mounted = true;
},
computed: {
count() {
return this.mounted ? this.$refs.counter.count : 0;
},
},
el: '#app'
});
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<button-counter ref="counter">My counter: <span v-text="count"></span></button-counter>
</div>
Using slot-scope
Using slot scope, you can pass multiple arguments to the parent slot:
// Define a new component called button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
methods: {
click() {
this.count++;
},
},
template: '<button v-on:click="click"><slot :count="count"></slot></button>'
})
// boot up the demo
var demo = new Vue({
el: '#app'
});
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<button-counter>
<span slot-scope="prop">
My counter:
<span v-text="prop.count"></span>
</span>
</button-counter>
</div>
You can send data to the slot. Look at this example:
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++"><slot :count="count" /></button>'
})
<div id="app">
<button-counter>
<template scope="props">
My counter: <span>{{ props.count }}</span>
</template>
</button-counter>
</div>
https://jsfiddle.net/s08yhcda/2/

Vue.js - One-way data binding updating parent from child

Given that a colon indicates one-way-data-binding in VueJS2, I would like to understand why in this example, the child is able to update the array that was declared in the parent and passed to the child via prop (one-way).
https://jsfiddle.net/ecgxykrt/
<script src="https://unpkg.com/vue"></script>
<div id="app">
<span>Parent value: {{ dataTest }}</span>
<test :datatest="dataTest" />
</div>
var test = {
props: ['datatest'],
mounted: function() {
this.datatest.push(10)
},
render: function() {}
}
new Vue({
el: '#app',
components: {
'test': test
},
data: function() {
return {
dataTest: []
}
}
})
Thanks in advance!
Vue prevents you from assigning to a prop. It does not prevent you from calling a prop's methods or modifying its elements or members, any of which can change the contents of the object. None of these things changes the value of the prop itself, which is a reference to an underlying structure.
A related issue is the fact that Vue cannot detect changes to Array elements or additions/deletions of Object members.
More here.
If you wanted to, you could avoid this by creating a shallow copy and assigning it to a new data item in the child.
https://jsfiddle.net/6xxba1fz/
var test = {
props: ['test'],
data: function() {
return {
myTest: this.test.slice()
}
},
mounted: function() {
this.myTest.push(10)
},
render: function() {}
}
new Vue({
el: '#app',
components: {
'test': test
},
data: function() {
return {
dataTest: []
}
}
})
Please avoid to using the some name for key and value
:datatest="dataTest" Wrong Way
:data-test="dataTest" Better Way (use Kabab case)
HTML
<div id="app">
<span>Parent value: {{ dataTest }}</span>
<test :data-test="dataTest" />
</div>
JS
var test = {
props: {
dataTest:{
type:Number
}
},
mounted: function() {
this.datatest.push(10)
},
render: function() {}
}
new Vue({
el: '#app',
components: {
'test': test
},
data: function() {
return {
dataTest: []
}
}
})
Result:
Parent value: []

Categories