I have an async operation in parent component and need to notify child, that this operation was completed. Could I watch in child for a property change. Somewhat like:
new Vue({
props:['parentReady'],
watch:{
parentReady(val){
alert('parentReady prop was changed');
}
}
})
There are several ways you could do this. You could set a property in the parent when the asynchronous action was complete.
console.clear()
Vue.component("child", {
props: ["parentLoading"],
template: `
<h1 v-if="isParentLoading">Parent is loading...</h1>
<h1 v-else>Parent loading complete!</h1>
`,
computed: {
isParentLoading() {
return this.parentLoading
}
}
})
new Vue({
el: "#app",
data: {
loading: true
},
mounted() {
setTimeout(() => this.loading = false, 2000)
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<child :parent-loading="loading"></child>
</div>
You could call a method on the child.
console.clear()
Vue.component("child",{
template:`
<h1 v-if="!loaded">Parent is loading...</h1>
<h1 v-else>Parent loading complete!</h1>
`,
data(){
return {
loaded: false
}
},
methods:{
onLoaded(){
this.loaded = true
}
}
})
new Vue({
el:"#app",
mounted(){
setTimeout(() => this.$refs.child.onLoaded(), 2000)
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<child ref="child"></child>
</div>
You could just watch the property.
console.clear()
Vue.component("child", {
props: ["parentLoading"],
template: `
<h1 v-if="parentLoading">Parent is loading...</h1>
<h1 v-else>Parent loading complete!</h1>
`,
watch: {
parentLoading(newVal) {
return newVal
}
}
})
new Vue({
el: "#app",
data: {
loading: true
},
mounted() {
setTimeout(() => this.loading = false, 2000)
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<child :parent-loading="loading"></child>
</div>
Related
I very new in vue, how can mylist random, can get the same value from somerandom
export default {
data () {
return {
somerandom:"foo",
mylist:{
random: this.somerandom
}
}
}
}
You can try with computed property:
new Vue({
el: '#demo',
data () {
return {
somerandom:"foo",
mylist:{
random: ''
}
}
},
computed: {
rand() {
return this.mylist.random = this.somerandom
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<p>{{ rand }}</p>
</div>
model init an object with value.
can set value by default or run func after computed or mounted
data() {
return {
somerandom: '',
someOther: [],
}
},
computed: {
useRandom() {
this.somerandom = this.rand();
}
},
methods: {
rand(){
return 'random';
}
}
I am trying to change the data depending on the value of my props in a Nuxtjs app.
export default {
props: {
moved: {
default: false,
type: Boolean,
}
},
data: function () {
if (!this.moved){
dataName: {
fill: "value1"
}
else dataName: {
fill: "value2"
}
return dataName
}
}
}
But I have an error message telling me that dataName is not defined. I don't know what I am doing wrong here...
You can make computed property instead:
Vue.component('Child', {
template: `
<div>
{{ dataName }}
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" :fill="dataName.fill"/>
</svg>
</div>
`,
props: {
moved: {
default: false,
type: Boolean,
}
},
computed: {
dataName() {
let mov = {}
this.moved ? mov.fill = 'blue' : mov.fill = 'red'
return mov
}
}
})
new Vue({
el: '#demo',
data() {
return {
moved: false
}
},
methods: {
changeMov() {
this.moved = !this.moved
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button #click="changeMov">Change</button>
<Child :moved="moved" />
</div>
I have an input in a child component and when the user starts typing in the input it updates the data in the parent component, or should. This is my code, I can post other parts if useful.
Child
<input
:keyup="updateFilters(filters[data.field.key])"
:placeholder="data.label"
/>
methods: {
updateFilters(value) {
this.$emit("input", value);
}
}
Parent
data() {
return {
filters: {
name: "",
age: "",
address: "",
},
};
},
You can change the parent from child component the same way you do emiting other events like onchange, onkeyup, onkeydown etc.
Vue.component('parent', {
data() {
return {
parentValue: ''
};
},
template: `
<div>
<label>Parent state value:</label>
{{parentValue}}
<br/><br/>
<label>input is the child component:</label>
<br/>
<child #fromChild="fromChild"></child>
</div>
`,
methods: {
fromChild(value) {
this.parentValue = value
console.log(value) // someValue
}
}
})
Vue.component('child', {
template: `
<input
v-on:keyup="updateParent($event.target.value)"
placeholder="type something"
/>
`,
methods: {
updateParent(value) {
console.log(value)
this.$emit("fromChild", value);
}
},
})
new Vue({
el: "#app",
data: {
label: 'in Vue'
},
methods: {
toggle: function(todo) {
todo.done = !todo.done
}
}
})
I've prepared a working example here.
On the change of the value id, I would like to make a JSON call via Axios and update necessary parts of the page. How do I do that? Currently, I have mounted and activated and they do not seem to be working...
Code:
const Home = {
template: `
<div class="user">
<h2>user {{ id }}</h2>
<h2>{{ info }}</h2>
bet
</div>
`,
props: {
id: {
type: String,
default: 'N/A'
}
},
data () {
return {
info: null
}
},
activated () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json',
{ params: { id: id }}
)
.then(response => (this.info = response))
},
mounted() {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = 'response'))
}
}`
You can listen to id prop change by using watch:
watch: {
id: function(newId) {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json',
{ params: { id: newId }}
)
.then(response => (this.info = response))
}
}
Here is a little demo based on the code that you shared that shows how watch reacts to id prop change. Wrapper component below is solely for demonstration purpose as something that triggers id value change.
const Home = {
template: `
<div class="user">
<h2>user {{ id }}</h2>
<h2>{{ info }}</h2>
bet
</div>
`,
props: {
id: {
default: 'N/A'
}
},
data () {
return {
info: null
}
},
mounted() {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = 'response'))
},
watch: {
id: function(newId) {
console.log(`watch triggered, value of id is: ${newId}`);
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json',
{ params: { id: newId }}
)
.then(response => (this.info = response))
}
}
}
const Wrapper = {
template: '<div><home :id="id" /></div>',
components: { Home },
data() {
return {
id: 0
}
},
mounted() {
const limit = 5;
const loop = (nextId) => setTimeout(() => {
console.log(`#${nextId} loop iteration`);
if (nextId < limit) {
this.id = nextId;
loop(nextId + 1);
}
}, 3000);
loop(this.id);
}
}
new Vue({
el: '#app',
components: { Wrapper }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js" ></script>
<div id="app">
<wrapper />
</div>
How do you go on passing objects as props on vue? I would imagine this would be a simple task but apparently not.
I have the following code on a .vue file:
// register the child component
Vue.component('component', {
props: {
data: {
type: Object
}
},
template: '<div>Data: {{data}}</div>',
mounted: function () {
console.log(this.data)
}
})
new Vue({
el: '#example'
})
<template>
<div id="example">
<component :data="msg"></component>
</div>
<template/>
<script>
export default{
data(){
return{
msg:{}
}
},
created(){
this.msg = { x: 6}
}
}
<script/>
Vue.component('component', {
props: {
data: {
type: Object,
default: () => ({
x: Number
})
}
},
template: '<div>Data: {{data.x}}</div>',
mounted: function () {
console.log(this.data)
}
})
new Vue({
el: '#example'
})
try this you use x but you never put default in it