I have this component with a slider, I have a submit button outside this component, can I somehow pass this timeAnswer value to a parent component, so I can submit the data?
div(v-if="timeConstraint")
VueSlider(
v-model="timeAnswer.duration",
v-bind="sliderOptionsEnd()"
)
const timeAnswer = reactive({ start: 0, duration: 900 });
You can use a computed property with getter/setter:
<vue-slider v-model="sliderValue" />
export default
{
props:
{
modelValue:
{
type: Number,
default: 0
}
},
computed:
{
sliderValue:
{
get()
{
return this.modelValue
},
set(val)
{
this.$emit('update:modelValue', val)
}
}
}
}
Related
there are two .vue file and one is parent and another is child.
I am developing 'Sending file' function with Modal.
I will upload file data in parent.vue.
and when I click 'Send', child.vue will be popped up!
and I will choose, target who receive this file data.
and finally, I click 'Send' button, get connection to Backend server.
This is parent.vue
<<templete>>
<script>
export default {
name: 'BillingView',
components: {
EmailSender
},
data() {
return {
uploaded_file: '',
file_data: {},
is_uploaded: false,
popupVal: false
}
},
methods: {
sendEmail() {
if (this.is_uploaded == false) {
alert('Upload your file');
} else {
<< parsing file data>>
this.file_data = JSON.parse(JSON.stringify(this.parsed_uploaded_file));
this.popupVal = (this.popupVal) ? false : true
}
},
popupClose: function ( value ) {
this.popupVal = value
}
}
}
</script>
This is child.vue
<<templete>>
<script>
import axios from 'axios';
export default {
name: 'EmailSender',
props: {
popupVal: Boolean,
file_data: {
type: Object,
default: () => {
return {}
}
}
},
data: () => ({
}),
computed: {
popUp: {
get() {
return this.popupVal
},
}
},
created() {
},
methods: {
sendEmail() {
let req_data = {};
req_data ['file'] = file_data;
axios.post(process.env.VUE_APP_BASE_API + 'email/',
{
req_data ,
headers: {
'Content-Type': 'application/json;charset=UTF-8-sig'
}
}
).then(res => {
console.log('SEND EMAIL SUCCESS!!');
console.log('SEND EMAIL RESPONSE::', res, typeof (res));
})
.catch(function () {
console.log('SEND EMAIL FAILURE!!');
});
}
}
};
</script>
but here, "req_data ['file'] = file_data;" the file_data is empty, {}.
I expect when I update file_data in parent vue, child can know and use updated file data.
how can I do?
You have to make sure you send file_data as a prop to your component. e.g. Your component is 'myPopup' and you should use it as below to send file_data as a prop:
<myPopup :myData="file_data" >
In this case, you can get file_data as 'myData' in the child component as below
After changes, your props should be:
props: {
myData: {
type: Object,
default: () => {
return {}
}
}
},
Your function should be:
Also, don't forget to use 'this' keyword. this.myData instead of myData in function.
methods: {
sendEmail() {
let req_data = {};
req_data['file'] = this.myData;
// axios here
};
},
Component
props: {
image: {
type: String,
default() {
return this.defaultImage
}
}
},
computed: {
defaultImage() {
return this.$config.baseUrl + '/images/default.jpg'
}
},
Using the above component, when prop-image is not present, the component returns default-image successfully.
<image-uplaoder />
But I want to achieve, if I pass the value for prop-image and the value is null, it should still return default-image. Currently, it returns nothing.
<image-uplaoder :image="data.image" />
Tried (can't we do something like) as follows?
computed: {
defaultImage(value) {
if(!value || value === null) {
return this.$config.baseUrl + '/images/default.jpg'
}
}
},
Instead of the prop's default() option, the computed property should contain the logic to use a default value:
// ImageUploader.vue
export default {
props: {
image: String,
},
computed: {
imgUrl() {
return this.image || (this.$config.baseUrl + '/images/default.jpg')
}
}
}
Then bind the computed property to your <img>.src:
<img :src="imgUrl">
demo
The component smart-list does it's job and is rendering the correct component.
It just doesn't pass on the props. I'd expect them to be in a context.data but it is undefined.
SmartList.vue
import EmptyList from "./EmptyList";
import FullList from "./FullList";
export default {
functional: true,
props: {
items: {
type: Array
}
},
render(h, { props, data, children }) {
if (props.items.length > 0) {
return h(FullList, data, children);
} else {
return h(EmptyList, data, children);
}
}
};
I have prepared a codesandbox example
What do I miss?
I have found the solution. In the smart-list component I've changed one line:
import EmptyList from "./EmptyList";
import FullList from "./FullList";
export default {
functional: true,
props: {
items: {
type: Array
}
},
render(h, { props, data, children }) {
if (props.items.length > 0) {
- return h(FullList, data, children);
+ return h(FullList, { attrs: props }, children);
} else {
return h(EmptyList, data, children);
}
}
};
Now it works.
Can someone point me why passing the full data object doesn't work? 🤔
I am new in vuejs2. I am getting below error. Could anyone say why this error is coming ? Could you please provide any sample solution for this ?
ModalBody.vue
<script>
import SemanticModal from 'vue-ya-semantic-modal'
export default {
components: { SemanticModal: SemanticModal() },
name: 'ModalBody',
props: {
active1: {
required: true
}
},
}
</script>
DataTable.vue
<script>
import ModalBody from './ModalBody'
export default {
components: { ModalBody },
data: function () {
return {
active1: false
}
},
props: {
columns: {
required: true
},
gdata: {
required: true
}
},
methods: {
show () {
this.active1 = true
}
},
}
Use computed Property(eg.isActive) for passing to children component
import ModalBody from './ModalBody'
export default {
components: { ModalBody },
data: function () {
return {
active1: false
}
},
props: {
columns: {
required: true
},
gdata: {
required: true
}
},
computed:{
isActive (){
return this.active1;
},
methods: {
show () {
this.active1 = true
}
},
}
And Pass this computed property to child component in template
<modal-body :active1='isActive'></modal-body>
By doing this it avoid mutation
Finally I got the solution. I added child component to parent component as like below
<modal-body :active1="active1" #sendValue="active1 = $event"></modal-body>
I added methods like below in Parent Component
methods: {
close() {
this.$emit('sendValue', false);
}
}
In vue prop mutating is anti pattern look here
I have a global.js and I'm emitting an event to global.js What I want to achieve is whenever the value of my global.js re-render the vue.
global.js
export let globalStore = new Vue({
data: {
translateBool: 0,
about: [`About Us`,`フィリピンのマニラに 2015年9月に設立。`]
},
methods: {
changeLanguage(){
if(this.translateBool == 0){
this.translateBool= 1
}else{
this.translateBool= 0
}
}
}
})
globalStore.$on('changeLanguage',globalStore.changeLanguage)
click.vue
import { globalStore } from '../../global.js';
export default{
name: "sample",
data(){
return{
language: globalStore.translate
}
},
methods : {
changeLanguage(){
globalStore.$emit('changeLanguage')
},
}
}
}
</script>
{{language}}
Even though translateBool is = 1, the output doesn't change
The data properties set in the data method are only set once during the Vue instance's initialization.
If you want the language property to update based on the current state of the globalStore.language value, you should make it a computed property:
export default {
name: "sample",
computed: {
language() {
return globalStore.translate
}
},
methods: {
changeLanguage() {
globalStore.$emit('changeLanguage')
}
}
}