无法将浮点数从组件传递到Vue。

huangapple go评论125阅读模式
英文:

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)

&lt;tr @click.prevent=&quot;choosenOneProduct($event,p, i);&quot; @change=&quot;emitEventChanged&quot;&gt;
&lt;td&gt; (Click Here) &lt;/td&gt;
&lt;/tr&gt;
...

choosenOneProduct(ev, p, i){
      var choose_product_ref =  firebase.firestore().collection(&quot;all_products&quot;).where(&quot;p_fullname&quot;, &quot;==&quot;, p.p_fullname);
      choose_product_ref.onSnapshot((snapshot) =&gt; {

          snapshot.docs.forEach(d =&gt; {
              this.tmp_sell = this.tmp_sell + tmp_one_sell; //correct value
              this.$root.$emit(&#39;tmp_sell&#39;, this.tmp_sell);
          })
        })
    },

in my Main.vue

&lt;input @change=&quot;getTmpSell&quot; @tmp_sell=&quot;getTmpSell&quot;  /&gt;

...
export default{

  props:[&#39;tmp_sell&#39;],
  methods:{
    getTmpSell(dest){ 
      this.tmp_sell = dest; //nothing here as well.
      console.log(&#39;received value      &#39;, dest); //nothing
      document.getElementById(&#39;q_subtotal&#39;).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:

&lt;template&gt;
  &lt;child-component :float-value=&quot;3.14&quot;&gt;&lt;/child-component&gt;
&lt;/template&gt;

&lt;script&gt;
import ChildComponent from &#39;./ChildComponent.vue&#39;;

export default {
  components: {
    ChildComponent,
  },
}
&lt;/script&gt;

In the child component, you can then receive the prop and use it in your component's data or computed properties:

&lt;template&gt;
  &lt;div&gt;{{ floatValue }}&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  props: {
    floatValue: {
      type: Number,
      required: true,
    },
  },
}
&lt;/script&gt;

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}}&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>
英文:

Check the answers for Vue Component Basics:

Playground

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const { createApp, ref } = Vue;

const QuoteAdd = {
  emits: [&#39;update:modelValue&#39;],
  props: { 
    modelValue: { 
      type: Number,
      required: true
    }
  },
  setup(props, context) {
    const choosenOneProduct = (event) =&gt; {
        context.emit(&#39;update:modelValue&#39;, props.modelValue + 1);
        
    }
    return { choosenOneProduct }
  },
  template: `&lt;hr/&gt;&lt;b&gt;QuoteAdd&lt;/b&gt;&lt;br/&gt;
  modelValue: {{modelValue}}&amp;nbsp;
  &lt;button @click=&quot;choosenOneProduct($event);&quot;&gt;+1&lt;/button&gt;`
}

const App = {
 components: { QuoteAdd },
 setup() {
  const tmp_sell = ref(0)
  return  { tmp_sell }
 }
}

const app = createApp(App)
app.mount(&#39;#app&#39;)

<!-- language: lang-css -->

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<!-- language: lang-html -->

&lt;div id=&quot;app&quot; v-cloak&gt;
  &lt;input type=&quot;number&quot; v-model=&quot;tmp_sell&quot; /&gt;
  &lt;quote-add v-model=&quot;tmp_sell&quot;&gt;&lt;/quote-add&gt;
&lt;/div&gt;
&lt;script src=&quot;https://unpkg.com/vue@3/dist/vue.global.prod.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月3日 17:41:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/75625420.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定