英文:
Cannot Pass the Float from component to vue
问题
<input @change="getTmpSell" :value="tmp_sell" id="q_subtotal" />
英文:
I struggle a lot from this topic. I want to pass variable tmp_sell
from AllProductsChoose component into QuoteAdd, the variable tmp_sell
is really in component AllProductsChoose but when I try to pass the float, it only gives me 0? Here is the component (Click Here and will calculate the total sells value, dynmaic, some are 1000, some are 2000 tmp_sell will calculate the total)
<tr @click.prevent="choosenOneProduct($event,p, i);" @change="emitEventChanged">
<td> (Click Here) </td>
</tr>
...
choosenOneProduct(ev, p, i){
var choose_product_ref = firebase.firestore().collection("all_products").where("p_fullname", "==", p.p_fullname);
choose_product_ref.onSnapshot((snapshot) => {
snapshot.docs.forEach(d => {
this.tmp_sell = this.tmp_sell + tmp_one_sell; //correct value
this.$root.$emit('tmp_sell', this.tmp_sell);
})
})
},
in my Main.vue
<input @change="getTmpSell" @tmp_sell="getTmpSell" />
...
export default{
props:['tmp_sell'],
methods:{
getTmpSell(dest){
this.tmp_sell = dest; //nothing here as well.
console.log('received value ', dest); //nothing
document.getElementById('q_subtotal').value = this.tmp_sell;
},
}
}
I want input tag q_subtotal
will show the tmp_sell
in the input field, I do props in Main.vue and this.tmp_sell
works find on components? What things I miss to pass component variable to the Main.vue? Any help would appreciated.
答案1
得分: 0
将浮点值从一个组件传递到Vue,你可以使用props。Props允许你从父组件传递数据到子组件。
在你的父组件中,你可以为浮点值定义一个prop:
<template>
<child-component :float-value="3.14"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
}
</script>
在子组件中,你可以接收prop,并在组件的数据或计算属性中使用它:
<template>
<div>{{ floatValue }}</div>
</template>
<script>
export default {
props: {
floatValue: {
type: Number,
required: true,
},
},
}
</script>
这段代码使用prop "float-value" 将浮点值"3.14"传递到子组件。在子组件中,接收到prop并在模板中使用它来显示该值。
请注意,在子组件中,我们将prop的类型定义为Number,以确保它是一个有效的浮点值。我们还将required设置为true,以确保prop被传递到子组件。如果prop未被传递,将会抛出一个错误。
希望这能帮到你将浮点值从一个组件传递到Vue!
英文:
To pass a float value from a component to Vue, you can use props. Props allow you to pass data from a parent component to a child component.
In your parent component, you can define a prop for the float value:
<template>
<child-component :float-value="3.14"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
}
</script>
In the child component, you can then receive the prop and use it in your component's data or computed properties:
<template>
<div>{{ floatValue }}</div>
</template>
<script>
export default {
props: {
floatValue: {
type: Number,
required: true,
},
},
}
</script>
This code passes the float value "3.14" to the child component using the prop "float-value". In the child component, the prop is received and used in the template to display the value.
Note that in the child component, we define the type of the prop as Number to ensure that it is a valid float value. We also set required to true to ensure that the prop is passed to the child component. If the prop is not passed, an error will be thrown.
I hope this helps you pass a float value from a component to Vue!
答案2
得分: 0
检查Vue组件基础知识的答案:
播放区
const { createApp, ref } = Vue;
const QuoteAdd = {
emits: ['update:modelValue'],
props: {
modelValue: {
type: Number,
required: true
}
},
setup(props, context) {
const choosenOneProduct = (event) => {
context.emit('update:modelValue', props.modelValue + 1);
}
return { choosenOneProduct }
},
template: `<hr/><b>QuoteAdd</b><br/>
modelValue: {{modelValue}}
<button @click="choosenOneProduct($event);">+1</button>`
}
const App = {
components: { QuoteAdd },
setup() {
const tmp_sell = ref(0)
return { tmp_sell }
}
}
const app = createApp(App)
app.mount('#app')
#app { line-height: 1.75; }
[v-cloak] { display: none; }
<div id="app" v-cloak>
<input type="number" v-model="tmp_sell" />
<quote-add v-model="tmp_sell"></quote-add>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
英文:
Check the answers for Vue Component Basics:
- VUE.JS 3 Changing boolean value of one sibling component from another
- Transfer variables between Vue components
Playground
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const { createApp, ref } = Vue;
const QuoteAdd = {
emits: ['update:modelValue'],
props: {
modelValue: {
type: Number,
required: true
}
},
setup(props, context) {
const choosenOneProduct = (event) => {
context.emit('update:modelValue', props.modelValue + 1);
}
return { choosenOneProduct }
},
template: `<hr/><b>QuoteAdd</b><br/>
modelValue: {{modelValue}}&nbsp;
<button @click="choosenOneProduct($event);">+1</button>`
}
const App = {
components: { QuoteAdd },
setup() {
const tmp_sell = ref(0)
return { tmp_sell }
}
}
const app = createApp(App)
app.mount('#app')
<!-- language: lang-css -->
#app { line-height: 1.75; }
[v-cloak] { display: none; }
<!-- language: lang-html -->
<div id="app" v-cloak>
<input type="number" v-model="tmp_sell" />
<quote-add v-model="tmp_sell"></quote-add>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论