How to Add Elements to an Array in vue.js

Asked 2 years ago, Updated 2 years ago, 127 views

If you click the text type button, it will be added to the array.According to the code I have now, the characters I entered in the text cannot be added in the push() of add function().Please tell me how to add it here.

<!DOCTYPE html>
<html>

<head>
    <metacharset="UTF-8">
    <title>
        sample
    </title>
    <link rel="stylesheet" href="style.css">
    
    <script src="https://gstatic.com/charts/loader.js"></script><!--type="text/javascript" works without it?-->
    
</head>

<body>
    <h3>Favorite Programming Language Vote</h3>
    <divid="chart_div" style="height:500px;">/div>
    <divid="app">
        <lib-for="(item,c)in dataArray" v-if="c>0">{{item[0]}}:{item[1]}}}
            <button v-on:click="addOne(c)">One vote</button>
        </li>
        <li><input type="text" v-model="myText" size="5"><button v-on:click="add">add;</button><li>;
    
 
    </div>

    <script>
        // Data to be used
        var orgdata = [
            ["Language", "Vote Count",
            ['Java', 1] ['C', 1]
        ];

        google.charts.load('current', {packages:['corechart']});
        google.charts.setOnLoadCallback(drawBasic);



        // Graph Display Count Function
        function drawBasic(){
            vardata=google.visualization.arrayToDataTable(orgdata);
            var options= {title: 'Favorite Programming Language', "is3D": true};
            var chart = new google.visualization.ColumnChart(
                    document.getElementById('chart_div'));
                chart.draw(data, options);
            }
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">/script>
<script>
    new Vue({
        el: "#app",
        data: {
            dataArray: orgdata,
            myText: "
        },
        methods: {
            addOne: function(val) {
                varobj=this.dataArray[val];
                obj[1]++;
                This.dataArray.splice(val,1,obj);
                drawBasic();
            }, add:function() { // Method to add to array
                    This.orgdata.push([this.myText,1]); // TODO
            }


                
        }
    });
</script>
</body>

</html>

vue.js

2022-09-30 20:15

1 Answers

The data, this.orgdata, does not appear to exist in that instance. Is this.dataArray incorrect?
Are there any errors on the browser console?


2022-09-30 20:15

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.