Cannot Pass the Float from component to vue

Question

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.

score 0 · Answer 1 · answered Mar 03 '23 at 12:24

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!

Tolbxela · Accepted Answer · 2023-03-03T13:04:42.067

Check the answers for Vue Component Basics:

Playground

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')

#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>

Cannot Pass the Float from component to vue

2 Answers2

Playground