<template>
<div class="card-deck mb-3 text-center">
<div class="card mb-3 box-shadow">
<div class="card-header">
Numbers Checked
</div>
<div class="card-body card-info color-accent" v-model="numbers_checked" v-text="numbers_checked">
</div>
</div>
</div>
</template>
<script>
export default {
props:
[
'overviewAnalytics',
],
data() {
return {
numbers_checked: this.overviewAnalytics.numbers_checked
};
},
created() {
this.channelTemperatureReading.listen('TemperatureReadingUpdate', reading => {
axios.get('/home/get-overview-analytics').then(resp => {
this.numbers_checked = 12; //resp.data.numbers_checked + 100;
});
});
},
computed: {
channelTemperatureReading() {
return window.Echo.channel('temperature-reading');
},
},
};
</script>
I've tried everything but text is not updating. Confirmed from every aspect that data does change.
Changes from AXIOS are coming just ok. I even tried to put custom value but no avail.
I don't what is issue here.
v-model only works on input, textarea, and select elements
You appear to be misusing computed properties which rely on reactive dependencies to execute however yours is wrapping window.Echo.channel('temperature-reading') which Vue knows nothing about.
I suggest you remove the computed property and use something like this
created() {
const channel = window.Echo.channel('temperature-reading')
channel.listen('TemperatureReadingUpdate', reading => {
axios.get('/home/get-overview-analytics').then(({ data }) => {
// console.log('get-overview-analytics', data.numbers_checked)
this.numbers_checked = data.numbers_checked + 100
})
})
}
As others have mentioned, v-model is not appropriate here so you should also remove that.
Don't use v-model with div, it's for inputs.
<div v-text="numbers_checked"></div>
From the documentation on v-model:
Usage: Create a two-way binding on a form input element or a
component.
Related
I have a question regarding the Masonry layout update. How can I trigger it in the Vue.js (Version 3) lifecycle hook "updated()"?
I have a card grid view like in the following code (using Bootstrap 5 here), but struggle to update the Masonry layout when e.g. a card changes its size. I know that I can use layout() see documentation but I don't know how to call it in my example.
So my main problem is, that I don't know how to make my Masonry object accessible in the updated function when initialized in the mounted() function. How do I do that?
<template>
<div
class="row justify-content-left"
data-masonry='{"percentPosition": true }'
>
<div class="col-md-6 col-lg-4 col-xxl-3 mb-4 card-col">
<Card 1 />
</div>
<div class="col-md-6 col-lg-4 col-xxl-3 mb-4 card-col">
<Card 2 />
</div>
<div class="col-md-6 col-lg-4 col-xxl-3 mb-4 card-col">
<Card 3 />
</div>
<div class="col-md-6 col-lg-4 col-xxl-3 mb-4 card-col">
<Card 4 />
</div>
</div>
</template>
<script>
[imports ...]
export default {
name: "ComponentName",
components: {
[components ...],
},
mounted: function () {
// initialize masonry
this.$nextTick(function () {
var row = document.querySelector("[data-masonry]");
new Masonry(row, {
// options
percentPosition: true,
});
});
},
updated: function() {
//-->how to call the relayout of Masonry here?
}
};
</script>
To cache a reference the resulting Masonry instance, just assign it to a property (you don't need reactivity on this instance, so attaching a property is fine):
export default {
mounted() {
this._masonry = new Masonry(this.$refs.masonry, ⋯)
},
updated() {
this._masonry.layout()
}
}
However, you'll notice that the this._masonry.layout() call does not actually re-layout the masonry items (likely due to some limitation of the library). The only workaround I see is to recreate the Masonry instance, and then you no longer need to cache a reference to it:
export default {
mounted() {
this.$nextTick(() => this.layout())
},
updated() {
this.layout()
},
methods: {
layout() {
new Masonry(this.$refs.masonry, ⋯)
}
}
}
demo
So the process is like this. I have a form that is created from api. I want to show all the inputs except for one. That one will only be shown if the user adds value to another specific input from the form.
Something like this is the idea.
<Form>
<div-for="formItem in state.formItemData">
<template v-if="formItem.one !== ''">
<form-input
v-model="invoiceForm.two"
:key="formItem.id"
ref="two"
></form-input>
</template>
</div>
</Form>
const invoiceForm = computed({
get: () => state.forms.formData,
set: (value) => {
state.forms.formData= value
}
})
The concept in your problem is very simple, you just must make use of a computed property that evaluates if there are values in input 1 and it will rerender the component showing input2.
new Vue({
el: '#app',
data: {
input1: '',
input2: ''
},
methods: {
verification() {
console.log(this.input1);
}
},
computed: {
notEmpty() {
return this.input1 !== '' && this.input1.length > 3;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input #change="verification" type="text" v-model="input1"> <input v-if="notEmpty" type="text" v-model="input2">
</div>
You should use a v-show if you're eventually going to show/hide it when rendering, especially if it's going to be multiple times. The Vue documentation says that the v-if will not be rendered when the initial condition is false.
Source: https://v3.vuejs.org/guide/conditional.html#v-if-vs-v-show
I'm making a chat system with socket.io and VueJS, so customers can talk to an admin. But when a client connects to the server, the variable in the data() updates. But the template is not updating.
Here is my code:
<template>
<div>
<div class="chats" id="chat">
<div class="chat" v-for="chat in chats">
<b>{{ chat.clientName }}</b>
<p>ID: {{ chat.clientID }}</p>
<div class="jens-button">
<img src="/icons/chat-bubble.svg">
</div>
</div>
</div>
</div>
</template>
<script>
let io = require('socket.io-client/dist/socket.io.js');
let socket = io('http://127.0.0.1:3000');
export default {
name: 'Chats',
data() {
return {
chats: [],
}
},
mounted() {
this.getClients();
this.updateClients();
},
methods: {
getClients() {
socket.emit('get clients', true);
},
updateClients() {
socket.on('update clients', (clients) => {
this.chats = clients;
console.log(this.chats);
});
}
},
}
</script>
Then I get this, the box is empty:
But I need to get this, this will only appear when I force reload the page. I don't know what I'm doing wrong...
Oke, I've found out where the problem was, in another component I used plain javascript which brokes the whole reactive stuff.
I am trying to mount a component on a function, it works fine. However I've got it setup so that it destroys the div after X amount of seconds. Then when I try and add the compoent again its removed the base div. I'm not sure how to fix this though...
Component:
<template>
<div>
<b-alert show dismissible variant="danger">
<i class="mdi mdi-block-helper mr-2"></i>{{ text }}
</b-alert>
</div>
</template>
<script>
export default {
name: "alertDanager",
props: {
text: null
},
created() {
setTimeout(() => this.destoryEl(), 5000);
},
methods: {
destoryEl() {
this.$destroy();
this.$el.parentNode.removeChild(this.$el);
}
}
};
</script>
Spawning the component in
const DangerAlertExtended = Vue.extend(dangerAlert);
const error = new DangerAlertExtended({ propsData: { text: "Error message" } });
error.$mount("#error");
I'm not sure how to make it stop overwriting the #error div...
Why not let v-if exclude it from the DOM instead of removing the element? Alternatively, it could be hidden but remain in the DOM with v-show (that's probably what I would do, unless there's a specific reason you need for it to not be in the DOM). I think it's generally better to let Vue manage the DOM rather than manipulate yourself.
<template>
<div v-if="showAlert">
<b-alert show dismissible variant="danger">
<i class="mdi mdi-block-helper mr-2"></i>{{ text }}
</b-alert>
</div>
</template>
<script>
export default {
name: "alertDanager",
props: {
text: null,
showAlert: true
},
created() {
setTimeout(() => this.hideAlert(), 5000);
},
methods: {
hideAlert() {
this.showAlert = false
}
}
}
</script>
i m new to vue (version 2.5) in my project i had install v-select i go through document and got confuse on few thing
here is my code
<template>
<div class="wrapper">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Category</label>
<v-select label="category_desc" options="category"></v-select>
</div>
</div>
</div>
<button type="button" variant="primary" class="px-4" #click.prevent="next()">next</button>
</div>
</template>
<script>
export default {
name: 'Addproduct',
data () {
return {
category:[]
}
},
mounted() {
this.$http.get('http://localhost:3000/api/categories') .then(function (response) {
console.log(response.data);
this.category=response.data
})
.catch(function (error) {
console.log("error.response");
});
},
method:{
next(){
// console.log('value of v-selection not option' ) eg id 1 has 'country' so i want id 1 in method next() i.e in console.log
}
}
now my problem is that how i can pass this axios responded success value to v-select option and second this how i can get selected value of v-select for eg;- when user click on next button how i can get which value is selected in v-select
You need to bind options to category. i.e. v-bind:options or short hand :options I would also suggest you use a method to make your ajax call, and then call the method in mounted() instead. Also you probably want a v-model on that select so I added that in the example.
First in your template...
<v-select v-model="selectedCategory" label="category_desc" :options="category"></v-select>
Then in your script definition...
data(){
return{
category:[],
selectedCategory: null,
}
},
methods:{
getCategories(){
this.$http.get('http://localhost:3000/api/categories')
.then(function (response) {
this.category=response.data
}.bind(this))
.catch(function (error) {
console.log("error.response");
});
}
},
mounted(){
this.getCategories();
}
Here is a working jfiddle https://jsfiddle.net/skribe/mghbLyva/3/
Are we talking about this select component? The simplest usage is to put a v-model attribute on your v-select. Then this variable will automatically reflect the user selected value.
If you need to specify options, which you might, then you also need to provide a value prop and listen for #change.