search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.38k stars 8.29k forks source link

Cannot add an element to array #10682

Closed TonisfelTr closed 6 months ago

TonisfelTr commented 6 months ago

Vue version

3

Link to minimal reproduction

https://play.vuejs.org/#__PROD__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

Steps to reproduce

I use Laravel 11 and Vue3.

I have this code:

<script lang="ts">
    import axios from "axios";
    import { reactive, ref } from 'vue';

    export default {
        data() {
            return {
                products: [],
            };
        },
        methods: {
            add() {
                // Add object item to array
                this.products.push({ name: 'Banana', amount: 4, price: 10 });
            },
        },
    };
</script>

And I have the button: 

<button class="btn btn-outline-info" id="product-add-btn" type="button" @click="this.add()">
                                            <span class="bi bi-plus-circle"></span> Add
                                        </button>

I just click the button and get an error.

What is expected?

An element should be added to array. P.S. There is a warning about it likes internal bug:

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . at

What is actually happening?

I got this error in browser console:

Uncaught (in promise) DOMException: String contains an invalid character patchAttr runtime-dom.esm-bundler.js:593 patchProp runtime-dom.esm-bundler.js:745 mountElement runtime-core.esm-bundler.js:5508 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 mountElement runtime-core.esm-bundler.js:5490 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 mountElement runtime-core.esm-bundler.js:5490 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 patchUnkeyedChildren runtime-core.esm-bundler.js:6266 patchChildren runtime-core.esm-bundler.js:6178 processFragment runtime-core.esm-bundler.js:5841 patch runtime-core.esm-bundler.js:5309 patchBlockChildren runtime-core.esm-bundler.js:5725 processFragment runtime-core.esm-bundler.js:5815 patch runtime-core.esm-bundler.js:5309 componentUpdateFn runtime-core.esm-bundler.js:6091 run reactivity.esm-bundler.js:177 update runtime-core.esm-bundler.js:6135 callWithErrorHandling runtime-core.esm-bundler.js:195 flushJobs runtime-core.esm-bundler.js:402 promise callback*queueFlush runtime-core.esm-bundler.js:311 queueJob runtime-core.esm-bundler.js:305 effect runtime-core.esm-bundler.js:6129 resetScheduling reactivity.esm-bundler.js:264 key reactivity.esm-bundler.js:437 add main-bp.vue:95 0 main-bp.vue:61 callWithErrorHandling runtime-core.esm-bundler.js:195 callWithAsyncErrorHandling runtime-core.esm-bundler.js:202 invoker runtime-dom.esm-bundler.js:693 addEventListener runtime-dom.esm-bundler.js:647 patchEvent runtime-dom.esm-bundler.js:662 patchProp runtime-dom.esm-bundler.js:727 mountElement runtime-core.esm-bundler.js:5508 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 mountElement runtime-core.esm-bundler.js:5490 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 mountElement runtime-core.esm-bundler.js:5490 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 mountElement runtime-core.esm-bundler.js:5490 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 mountElement runtime-core.esm-bundler.js:5490 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 mountElement runtime-core.esm-bundler.js:5490 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 mountElement runtime-core.esm-bundler.js:5490 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 mountElement runtime-core.esm-bundler.js:5490 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 mountElement runtime-core.esm-bundler.js:5490 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 mountElement runtime-core.esm-bundler.js:5490 processElement runtime-core.esm-bundler.js:5455 patch runtime-core.esm-bundler.js:5323 mountChildren runtime-core.esm-bundler.js:5583 processFragment runtime-core.esm-bundler.js:5797 patch runtime-core.esm-bundler.js:5309 componentUpdateFn runtime-core.esm-bundler.js:6011 run reactivity.esm-bundler.js:177 update runtime-core.esm-bundler.js:6135 setupRenderEffect runtime-core.esm-bundler.js:6145 mountComponent runtime-core.esm-bundler.js:5913 processComponent runtime-core.esm-bundler.js:5867 patch runtime-core.esm-bundler.js:5335 render2 runtime-core.esm-bundler.js:6656 mount runtime-core.esm-bundler.js:3921 mount runtime-dom.esm-bundler.js:1511

app.js:5 [runtime-dom.esm-bundler.js:593:6](http://127.0.0.1:5175/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js) ​app,js content: ```javascript import { createApp } from 'vue'; import MainBP from './src/main-bp.vue'; const app = createApp(MainBP); app.mount('#main-bp'); ``` ### System Info ```shell System: OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish) CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz Memory: 8.78 GB / 11.66 GB Container: Yes Shell: 5.1.16 - /bin/bash Binaries: Node: 18.20.2 - /usr/local/bin/node npm: 10.5.0 - /usr/bin/npm Laravel 11, Laravel Sail, Vue3 ``` ### Any additional comments? Full code of file ```html ```
Shyam-Chen commented 6 months ago

https://play.vuejs.org/#eNp9klFv1DAMx7+KlZdt0qllsKejnNjQHuABEPBGEMoS7y63NokS57ip6nfHadfeHqapUmv7b8c/O+3FdQjVIaNYi4awC60i3EgH0ISIm76HEL3JmhIMQ1OX2CjeZSLvgB4DfpBi8qSAj7q1+oEjyhgpNtfGNPUkcllTP2vAbtLRBmIbj8FHAoP3KrcEfelgFKnzi8kGiEg5utmDBWoNv/+spuDwvnyH0euQdt6w+lTANKezAOoamAz83R41gWUqIA8qRvU4p9DOpmruUoWcduc9ONXhGs5ulOPnbAWq89nRGq5WDGQ1a5dvYLgYQWaU8i5oTb2MK1aCkvbu3m6rffKOVz+iSaF9F2yL8Vsg612SYpmAN9q2/t+XMUYx49PUXLND/fBCfJ+OJSbF94gJ4wGlWDRScYs0ybc/v+KR7UXseOiWs18Rf2DybS6MU9pNdoaxn+WNtJ+7cq/WbX+l2yOhS/NQBfR0W1Lw//fpldFPuO+qq7GOd8pb/HvAWM7kBbJQvb0Uw3/XUekF

TonisfelTr commented 6 months ago

https://play.vuejs.org/#eNp9klFv1DAMx7+KlZdt0qllsKejnNjQHuABEPBGEMoS7y63NokS57ip6nfHadfeHqapUmv7b8c/O+3FdQjVIaNYi4awC60i3EgH0ISIm76HEL3JmhIMQ1OX2CjeZSLvgB4DfpBi8qSAj7q1+oEjyhgpNtfGNPUkcllTP2vAbtLRBmIbj8FHAoP3KrcEfelgFKnzi8kGiEg5utmDBWoNv/+spuDwvnyH0euQdt6w+lTANKezAOoamAz83R41gWUqIA8qRvU4p9DOpmruUoWcduc9ONXhGs5ulOPnbAWq89nRGq5WDGQ1a5dvYLgYQWaU8i5oTb2MK1aCkvbu3m6rffKOVz+iSaF9F2yL8Vsg612SYpmAN9q2/t+XMUYx49PUXLND/fBCfJ+OJSbF94gJ4wGlWDRScYs0ybc/v+KR7UXseOiWs18Rf2DybS6MU9pNdoaxn+WNtJ+7cq/WbX+l2yOhS/NQBfR0W1Lw//fpldFPuO+qq7GOd8pb/HvAWM7kBbJQvb0Uw3/XUekF

I cannot understand what's different.

haoqunjiang commented 6 months ago

Remove v-bind="product.name", v-bind="product.name", v-bind="product.amount", etc. That's not how it's supposed to be used.

https://vuejs.org/api/built-in-directives.html#v-bind

Next time, before opening a bug report, please read the issue form:

Before You Start...

This form is only for submitting bug reports. If you have a usage question or are unsure if this is really a bug, make sure to:

Also try to search for your issue - it may have already been answered or even fixed in the development branch. However, if you find that an old, closed issue still persists in the latest version, you should open a new issue using the form below instead of commenting on the old issue.