Cannot display data into input form on vue?

  laravel, vue-component, vue.js, vuejs2

I used vue-currency-input for make input look like money number. and i make a test on sandbox Codesandbox and run succesfully. and then i implement on my laravel vue projects.

CurrencyInput.vue

<template>
    <input class="form-control" ref="inputRef" :value="formattedValue" />
</template>

<script>
import useCurrencyInput from "vue-currency-input";

export default {
    name: "CurrencyInput",
    props: {
        modelValue: Number,
        options: Object
    },
    setup(props) {
        const { formattedValue, inputRef } = useCurrencyInput(props.options);

        return { inputRef, formattedValue };
    }
};
</script>

and this is my Index.vue

import CurrencyInput from "./CurrencyInput.vue";

export default {
  components: {
    CurrencyInput
  },
  data() {
        return {
            price: [
                {
                    id: 1,
                    amount: 6000
                },
                {
                    id: 2,
                    amount: 4000
                },
                {
                    id: 3,
                    amount: 6000
                }
            ],
        };
     },
   }

and then i bind data

<tr v-for="tipe in price" :key="tipe.id">
    <td>{{ tipe.id }}</td>
    <td style="width:60%">
       <CurrencyInput
          v-model="tipe.amount"
          options="{
             currency: 'EUR',
             currencyDisplay: 'hidden'
           }"
        />
     </td>
</tr>

Its completely same with my Codesandbox example.
but i got no data from vue dev, looks like this. i got null value from amount data.
no data value

on sandbox i used vue 3 and on laravel use vue 2.

Source: Laravel

Leave a Reply