Question

我是vueJS + laravel的新手，这是laravel5.8下的VueJs组件当前，它具有两个选择按钮，它们创建了动态输入字段，我试图获取用户动态输入的值的总和=？的乘积。请帮助-谢谢

<template>
     <div><form type="get" action="/asd">
        <div>
          <label>Add A</label>
             <button type="button"  @click="addRow">100</button>
        </div>
     <div> <label>Add B</label>
         <button type="button"  @click="addRow1">200</button>
     </div>

       <div v-for="row in rows" :key="row.id">
         <button-counter :name ="row.name" :id="row.id" :value="row.value"></button-counter>
      </div>
         <div>
            <li>total = ?</li>
         </div>
      <button>submit</button>
        </form>
         </div>
</template>


<script type="text/javascript">
Vue.component("button-counter", {
    props: {
        value: {
            default: ""
        }
    },
    template: '<input name=row.name type="text" style="margin-top: 10px;" v-model="value" >'
});

export default {
    data() {
        return {
            rows: [],
            count: 0
        };
    },
    methods: {
        addRow: function() {
            var txtCount = 1;
            let id = "txt_" + txtCount;

            this.rows.push({ name:'A',value:100, description: "textbox1", id });
        },
        addRow1: function() {
            var txtCount = 1;
            let id = "txt2_" + txtCount;
            this.rows.push({name:'B',value:200, description: "textbox2", id });
        }
    }
};

Answer 1

<template>
    <div><form type="get" action="/asd">
        <div>
            <label>Add A</label>
            <button type="button"  @click="addRow">100</button>
        </div>
        <div> <label>Add B</label>
            <button type="button"  @click="addRow1">200</button>
        </div>

        <div v-for="row in rows" :key="row.id">
            <button-counter :name ="row.name" :id="row.id" :value.sync="row.value"></button-counter>
        </div>
        <div>
            <li>total = {{ total }}</li>
        </div>
        <button>submit</button>
    </form>
    </div>
</template>


<script type="text/javascript">
    Vue.component("button-counter", {
        props: {
            value: {
                default: ""
            }
        },
        template: '<input name=row.name type="text" style="margin-top: 10px;" :value="value" @change="$emit(\'update:value\', $event.target.value)">'
    });

    export default {
        data() {
            return {
                rows: [],
                count: 0
            };
        },
        computed: {
            total() {
                if (this.rows.length) {
                    return this.rows.reduce((acc, row) => acc*row.value, 1);
                }

                return 0;
            }
        },
        methods: {
            addRow: function() {
                var txtCount = 1;
                let id = "txt_" + txtCount;

                this.rows.push({ name:'A',value:100, description: "textbox1", id });
            },
            addRow1: function() {
                var txtCount = 1;
                let id = "txt2_" + txtCount;
                this.rows.push({name:'B',value:200, description: "textbox2", id });
            }
        }
    };

添加

total(){
    return this.rows.reduce((acc, row) => acc += parseInt(row.value), 0);
}

如何在laravel + vueJs组件中乘以动态创建的输入字段的值？

1 个答案: